I'm building a layout where many rows will span the entire containing column. I'm wondering if I should nest a col-12 inside each of these rows and put content in there or if I should just put the content inside the row?
So, is this OK:
<div class="row">
<div class="my-lazy-content"></div>
</div>
Or, is it better to put a column in there too:
<div class="row">
<div class="col-xs-12">
<div class="my-verbose-content></div>
</div>
</div>
If you want the content to span the entire column, you should add in the col-xs-12 wrapping div around your content. This ensures that the content has that 15px of padding to the left and right and doesn't simply "hard-align" to the edges of the row element since the row class has negative -15px of margin to compensate for the container's 15px padding?
Is it absolutely necessary to have the rows? If the content simply spans the entire width of the container, why not just nest your content directly within the container as follows:
<div class="container">
<div class="content-wrapper">
</div>
</div>
Related
I have the following footer that is broken to 2 part: an upper part and a lower part:
The upper part of the footer contains 4 divs and its css has:
display:flex;
justify-content:space-between;
While the lower part contains 3 divs (1 is completely empty) and also its css has:
display:flex
justify-content:space-between;
What I want is to make the unordered list that starts with TERMS & CONDITIONS in the bottom part of the footer to start just under the unordered list that ends with BEST PLAYERS in the upper part of the footer, so along this red line:
The best way to do this, is to rearrange you html code: Instead of making two rows footer, make it one row with two columns, the first column is for the logo and the second column divided into two rows as well, with three columns
<div class="row">
<div class="col-3">
<div class="logo">
<img src="your-logo.png" alt="logo">
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">fixtures</div>
<div class="col-4">latest tweets</div>
<div class="col-4">follow</div>
</div>
<div class="row">
<div class="col-4">blank</div>
<div class="col-4">terms & privary</div>
<div class="col-4">social icons</div>
</div>
</div>
I am using bootstrap for making responsive website but when I am giving padding to elements to adjust them in particular column it is breaking in other devices.
I am giving padding in % still it's breaking.
What should I do?
What is the best way to adjust elements within a particular column?
You should keep the grid elements intact. Add children inside them to add padding.
<div class="row">
<div class="col-md-8">
<div class="element-with-padding"></div>
</div>
<div class="col-md-4">
<div class="element-with-padding"></div>
</div>
</div>
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| | | |
| | | |
+-------------------------------+ +-------------------------------+
Generally it is easy with Bootstrap 3.
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-5 pull-right">
</div>
</div>
The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.
I also tried to add padding right and left, but that had not effect, too. What can I do here?
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6 gets overriden.
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
You can use another div inside and give padding to that.
<div class="row">
<div class="col-md-6">
<div class="inner-div">
</div>
</div>
<div class="col-md-6 pull-right">
<div class="inner-div">
</div>
</div>
</div>
.inner-div{
padding: 5px;
}
I posted this here already but it is still relevant the original question.
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
Hope this helps
Here's another possibility:
Live view
Edit view
You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.
The suggestion from Ken has clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-11">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
</div>
</div>
Good luck!
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
</div>
I understand that you need 12 spans in total. Is there a way to still center align the two spans I have horizontally? The above will just float to the left.
I've tried putting a wrapper around them and margin auto'ng it but nothing happens.
I can go and remove the span class and just add a specified width but I need span class for fluid layout.
If you want to center two columns of span4 you can use offset param like this:
<div class="row">
<div class="span4 offset2"></div>
<div class="span4"></div>
</div>
Remember this may crash in lower resolutions. To prevent that think about using fluid grid layout. This is done by changing
<div class="row">
into
<div class="row-fluid">
Hope that helps!
I'm trying to create a web page and I have this problem-question. The idea is to show an article in the main column, to the left, and several comments below the article.
In the right column, we'll show ads.
The problem is this: I have proved several layouts (this is the last one), but always the right column fall below the left (article-and-comments).
How I could do this?. The idea is that the left column (article-and-comments), could grow indefinitely, or even could be very short (if no one has commented), but the right column always keep on the right.
<body>
<div class="container">
<div class="header">Header menus etc etc</div>
<div id="main-block">
<div id="article-and-comments">
<div class="article-detail">The Article </div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
</div>
<div class="advertising">
Right Column with Ads
</div>
<div class="push"></div> <!-- This is to push the footer to the bottom
</div> <!-- main-block -->
<div class="footer">
Footer
</div>
you need to make the article-and-comments and advertising widths to add up to the main-block width.
And you need to float them left and right ..
example at http://www.jsfiddle.net/gaby/tBd7L/
There are a few ways to do this. One is to set your content column to a fixed width and float it left, then set your ad column to have a left margin greater than or equal to the width of the content column.
Here's a very rough example:
http://jsfiddle.net/PVqKX/