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
Related
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 .
Is there possible to stack elements on each other (col-12) on small device, but use auto-layout for all bigger screens? An example mentioned below does not work. I do not know how many columns I will render (1-6) so cannot "calculate the class" in advance.
<div class="row">
<div class="col-12 col-md-auto">Column 1</div>
<div class="col-12 col-md-auto">Column 2</div>
<div class="col-12 col-md-auto">Column 3</div>
</div>
Just remove the auto
<div class="row">
<div class="col-12 col-md">Column 1</div>
<div class="col-12 col-md">Column 2</div>
<div class="col-12 col-md">Column 3</div>
</div>
I am trying to use two column divisions in same line.
Check my code:
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Left Div
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Right Div
</div>
</div>
</div>
this structure responsive for till 574px. but when i reduce browser size after 574px, divisions show in two rows. but my requirement show it in same line (left & Right)
please check above image. that the issue.
You can set same divided columns for every screen using col class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col bg-success">
Left Div
</div>
<div class="col bg-warning">
Right Div
</div>
</div>
</div>
</div>
bg-success and bg-warning is just for color
<div class="col-12 ">
<div class="row">
<div class="col-6">
Left Div
</div>
<div class="col-6">
Right Div
</div>
</div>
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 using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap