I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
Related
I have Bootstrap 3 layout. Content is based on 10 from 12 available columns. Let's say I have something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-3">CENTER COL</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
With this I have left and right columns positioned as I want it to be - one column width from both, left and right sides of browser window. And I want to position center column exactly in center, between left and right columns, to have same margin between them.
When using offset / pull / push bootstrap classes, they are positioning columns too much left or right.
I have made my own workaround class .col-center which works like .col-lg-offset-1 only I'm using calc() function to subtract the offset in pixels from bootstrap's percentage value. But in my opinion this solution kind of sucks.
Any advice?
edit:
sample image to describe better
Can you not align the content within the columns to get what you're after?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">LEFT COL</div>
<div class="col-xs-4 text-center">CENTER COL</div>
<div class="col-xs-4 text-right">RIGHT COL</div>
</div>
</div>
I believe this can't be done in bootstrap. But you can achieve this result by adding a customized class and additional markup. Try if this works for you and breaks nothing :P
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-4">
<div class="col-center col-lg-9"> CENTER COL
</div>
</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
CSS
.col-center {
margin: auto;
float: none;
}
You can add flexbox and distribute the cols evenly.
Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.
I am curious if I need to wrap each of the rows in a grid of results within a row class div. In my case the results are identical dimensions. So I would have:
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
Is there any specific benefit to using row if I am creating a grid? So like this:
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
I understand for other types of layouts where content is uneven then the row is essential. But again assuming identical dimensions is the first method acceptable?
According to my understanding:
.row gives you two imp styling:
margin-right: -15px;
margin-left: -15px;
Which nullifies the effect of container's styling:
padding-right: 15px;
padding-left: 15px;
Hence it is necessary to use row to make sure your container styling is overwritten. It also provides additional styling of setting the width in various media queries.
There is no hard and fast rule that you should include it. Although it is good practice to include it in order to avoid unexpected result and adding additional styling.
It's not necessary but it's better practice.
What .row actually does is that it "nullifies" the padding-left from the first column and padding-right from the last column by having margin: 0 -15px;
Using .row allows you to create your page filling the entire .container. Otherwise you will waste 30px of the viewport's width which is problem when the viewport's total width is only 320px.
It is handy also when you create nested grids. If you don't wrap your columns inside a .row, you will end up having padding: 0 15px; in your nested "row". Nested columns should look like this unless you want to have 15px of padding on both sides:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-8></div>
</div>
</div>
...
</div>
</div>
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
In the code below the span #2 appears below span #1, despite the fact that the number of columns is the same as in the parent span (10). This is because of the border on the nested row (class="row well").
Is there an elegant way to apply border to the nested row without pushing the contents down.
I suppose applying top/left/bottom/right borders on the nested spans depending on their location and applying box-sizing: border-box would help, but then there will be problems when reducing the width of the browser and also this would be an ugly solution.
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="row well">
<div class="span5" style="background-color: #aca">
#1
</div>
<div class="span5" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
dont put the well on the row, make it its own container..
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="well">
<div class="row-fluid">
<div class="span6" style="background-color: #aca">
#1
</div>
<div class="span6" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
</div>
I replaced the class="row" with class="row-fluid" because the "row" class uses strict widths, while the "row-fluid" class uses percentages and will keep the "span6" classes side by side even though there's extra padding and borders added to its parent.