How to keep space between three columns in Bootstrap? - html

I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.
Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.
Here is some example code:
<div class="row-fluid">
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
</div>
Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.
Thanks for any help! I'm open to all suggestions!

Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.
Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy

It's a late answer but I guess that some people can be interessed by another explanation.
Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:
<div class="row-fluid">
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
Then you can add spacing on ".col-spaced" by using padding
.col-spaced {
margin-left: 15px
}
Note that:
margin will change you column size because the col-* should be placed to respect column layout
you may need to change col-* first and last child to fix some problem

A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.

You can do something like:
[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
[class*="col-"]:first-child {
padding-left: 0px;
}
[class*="col-"]:last-child {
padding-right: 0px;
}
You might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!
.spaced-columns [class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
So then you can use:
<div class="spaced-columns">
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
</div>
or you can create just a class like: spaced-col and then add a padding on it:
.spaced-col {
padding: 0px 10px;
}
and then you apply this class on your cols
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
So you'll have your spacing as you want :)
Cheers

If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them.
Perhaps a better option would be
.col-md-4 {
margin-left: 5px;
}

You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.
Check this out: twitter bootstrap grid system. Spacing between columns

You can put another div to place your content inside the .col div, as the below example:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
</div>
</div>
See it working here: https://codepen.io/pmfeo/pen/RVxPXg
That div will adjust to it's parent padding.

Related

Why is the padding between the bootstrap columns getting lost

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

Increasing div's width

I have a problem with my divs. I created 3 divs with same classes. I want to create 3 cards with avatar and personal info on them, but these divs are "sticked". I want to make a gap between them (from right side), but when I make padding-right, there's no gap, but more background color. How can I separate these three divs without changing width?
Here's my code:
<div id="team">
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
</div>
http://codepen.io/anon/pen/PbMBPy
Thanks for help!
You have to use margin-right: 25px; instead of padding-right: 25px;
use margin-right instead of padding-right

col-lg-8 not using 8/12ths of the screen?

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.

How to make panels full height of parent div?

I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx

Is it necessary to have rows wrapped in a row class in Bootstrap?

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>