how can I create some space between grid spans in Twitter bootstrap? I am using margin or padding, but both of them push the last grid span to a new line and breaks the layout. Here is the jsfiddle:
http://jsfiddle.net/jUQEc/1/
And, some markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Two things:
You need to add the container-fluid class to the container. This will keep the left/right margins in tact when you bring the screen in.
Add a box-sizing:border-box to the .box class to tell the browser to keep all padding and margins inside the width defined by the span classes.
Lastly, you have a header tag inside the container but not in a row/span. You will probably get more consistent rendering if you wrap it up.
Here is a fiddle: http://jsfiddle.net/8RVx6/
Related
I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>
<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>
I have a three section of my page that are inside fullpagejs. The middle page needs to contain a very tall div that is split in two columns. The left is the div that needs to follow right text that takes the entire height of div. But because the way the fullpage.js works(translate with css not actual scrolling i can't make div that is positioned fixed to behave like it should
HTML
<div class="section section-1 show-for-large">
section1 content
</div>
<div class="section section-2">
<div class="row">
<div class="small-12 medium-6 column">
<div class="row" id="pokemon">
<div class="small-5 medium-5 columns">
<img src="/">
</div>
<div class="small-7 medium-7 column">
<span class="title">
title
</span>
</div>
</div>
<div class="row hide-for-large">
<div class="small-12 columns">
<p>
text
</p>
</div>
</div>
</div>
<div class="small-12 medium-5 column">
<div>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="section section-3">
section3 content
</div>
<div class="section section-4 fp-auto-height">
section4 content
</div>
FULLPAGE JS
$('#fullpage').fullpage({
sectionSelector: '.section',
scrollOverflow: true,
verticalCentered: false,
normalScrollElements:'#pokemon',
css3: true,
});
I tried using plugins like http://stickyjs.com/ , and similar like it but the problem is they all work on principle of scrolling.
Use position:absolute instead of fixed. Then use position:relative for the section elements, so the absolute position will be related to the section.
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.
I want my fluid boxes to take all the content. This is what I get now:
And this is what I am looking for:
I am using the Twitter bootstrap.
Here is the jsfiddle, exactly like my layout shows:
http://jsfiddle.net/jUQEc/
Current html markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div class="span6 item">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Thanks.
You should put a width on the 3rd box and then float it right. If it fits, it will sneak up and fill in the space you are looking for. Perhaps you should brush up on how floats work and take a look at how this applies to divs in bootstrap. Hope this helps!
I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.
Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.
I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.
What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look.
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
<script>
$('div.frustrate_topside').click(function(){
$('i').toggle();
});
</script>
Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/
I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.
HTML:
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside" for='q1'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q2'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q3'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
CSS:
.icon-ok
{
display:none;
}
JS:
$('div.frustrate_topside').click(function(){
var elt = $(this).attr('for');
$("#" + elt).toggle();
});