I'm using bootstrap in a project and I want to put margin between divs and this is my code :
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12 col-12 box">a</div>
<div className="col-lg-4 col-md-4 col-sm-12 col-12 box mr-1 ml-1">b</div>
<div className="col-lg-4 col-md-4 col-sm-12 col-12 box">c</div>
</div>
</div>
The problem is it doesn't push other divs and break up the whole row , basically it doesn't apply margin properly .
How can put margin between these divs properly ?
I solved the margin problem by adding another div inside all divs like this :
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
<div className="box ml-1 mr-1">a</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
<div className="box ml-1 mr-1">b</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
<div className="box ml-1 mr-1">c</div>
</div>
</div>
</div>
And now all three divs have margins between .
Related
I have a question regarding a bootstrap grid system I am trying to achieve - and have not been successful so far.
I am trying to do the following grid system:
I have tried a code that you'll find with this JSFiddle.
<div class="container mt-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12 border bg-light">
<h3>Bloc 2</h3>
</div>
<div class="col-lg-6 col-md-12 bg-danger">
<h3>Bloc 3</h3>
</div>
</div>
</div>
It works well for xs and md system. However, I have issues with the lg version, where I don't find a way to stack the bloc number 2 (grey) on top of the bloc number 3 (red). Is there a way to change the place of such a column? As indicated on the figure above, the bloc number 1 should fall to the bottom of the page.
Thanks a lot for your help!
Basically, you have to wrap a div for a second column around the gray and red divs
<div class="container ">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
<div class=" border bg-light">
<h3>Bloc 2</h3>
</div>
<div class=" bg-danger">
<h3>Bloc 3</h3>
</div>
</div><!--new div end-->
</div>
</div>
You will need to work out the tweaks for spacing, but this is a start
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
I create a price table include 3 columns.
My code like:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
</div>
</div>
Using col-xx-4 is work perfect. Only at col-sm-4, my page is broken. Like:
I decide using col-sm-6, it shows like:
Look good. But at the final item, it should be at center screen and margin-top: 15px to look pretty.
I don't know how to do it. Have any method to resolve my problem?
Try use offset
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-3">
</div>
</div>
</div>
The problem with Bootstrap's columns is that you can't make the columns equal in height. I recommend you use flex for this.
I'm obviously missing something very obvious here but I want a 10px gutter between the bootstrap columns. Coming from ui-kit which has gutters by default, to turn them off you simple add the class uk-grid-collapse.
What is the bootstrap equivalent for turning gutters on?
http://codepen.io/anon/pen/vKBjBa
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col1">
<div class="div-content">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col2">
<div class="div-content">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col3">
<div class="div-content">col 3</div>
</div>
</div>
Just define the colors to inner div. Here i have remove classes from parents and passed the classes to child div's
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="div-content col1">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col2">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col3">col 3</div>
</div>
</div>
Because bootstrap has a default gutter space in col- classes so use them and define background-color to inner div's.
The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.
You can do it using bootstrap class container-fluid , Please update your HTML with following :-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="container-fluid col1">
<div class="div-content">col 1</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col2">
<div class="div-content">col 2</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col3">
<div class="div-content">col 3</div>
</div>
</div>
</div>
It may help you.
If you want a custom gutter width of 10px, you can do that by customizing the bootstrap with your value by using http://getbootstrap.com/customize/ or you can make your own custom class to overide it
If you want to completely remove the gutter, Bootstrap 3 introduced row-no-gutters in v3.4.0:
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
I have 4 divs, aligning in a straight line in fullscreen mode.
When the screen is smaller, they get responsive.
But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
In fullscreen:
When screen gets smaller:
How it should be:
HTML:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
EDIT: Putting <div class="clearfix visible-sm-block"></div> after the 2 divs worked.
When using ng-repeat, use this code I wrote:
`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
<div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
<div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
<div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`
Take a look at responsive column resets.
See: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
</div>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.
You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
So for example this should be:
<div class="col-xs-12 col-sm-6 col-md-3 box-container">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
And in css:
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!
You are missing the class=row divs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
So, in order to fix that, you need to do something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.