This question already has answers here:
Bootstrap Grid System new line does not look nice
(4 answers)
Closed 6 years ago.
I have 4 divs, div 2 is very lengthy,
div 1,3,4 are of equal sizes,
I want them to display in a compact form,
but it displays full contents of div2 then only displaying div3 ,it displays div 3 as a new row after all the contents of first row
<div class ="row">
<div class="col-xs-12"> //content 1 </div>
<div class="col-xs-12"> //content 2 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 3 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 4 </div>
</div>
please help me
Solved the problem myself
Used row inside col div
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
Related
I'm struggling right now with the order of the columns and rows of a bootstrap layout and I'm wondering if what I'm trying to do is even possible using bootrsap's rows/columns grid system.
So, I have the following layout for large devices:
And I want the columns to be reoredered on small devices like this:
Problem is... I have this "column 2" and I can't break it in two parts :D
Is there another way to achieve the same kind of layot using bootstrap?
Thanks in advance!
Edit
So, the large devices layout would be something like the this:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8">
<div>
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
<div class="row">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
See it on codepen: https://codepen.io/lucas-labs/pen/yLLeVxO
To change the column order, the columns must share the same parent. The only way to get this to work in Bootstrap 4 would be to disable the flexbox on lg and use floats.
<div class="container-fluid">
<div class="row mainrow d-lg-block d-flex overflow-auto">
<div class="col-12 col-lg-8 first-column float-left">
<div class="big-data-table">
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right order-first">
<div class="row myrow">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right">
<div class="row myrow">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/V9eB4jUNhw
This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Closed 4 years ago.
I am trying to use the bootstrap 4 grid system to center a single column. In bootstrap 3 I was able to do:
<div class="col-md-10 col-md-offset-2">
</div>
In bootstrap 4 the same does not work even when using the new offset class: offset-md-2.
The following works, but something feels wrong about having empty columns on the page, just to center a col-md-5.
<div class="row">
<div class="col"></div>
<div class="col-md-5 align-self-center">
<img src="img/myimage.gif" style="width: 100%;">
</div>
<div class="col"></div>
</div>
As per the documentation you can use justify-content-center on the row to center any number of columns in a row.
<div class="row justify-content-center">
<div class="col-4">
One centered column
</div>
</div>
You can add
justify-content-center
on "row" div.
so it would be something like this:
<div class="container">
<div class="row justify-content-center">
<div class="col-2">
//content ...
</div>
</div>
</div>
This is an example from the official bootstrap documentation
https://getbootstrap.com/docs/4.0/layout/grid/
This question already has answers here:
Remove spacing between cols
(11 answers)
Closed 6 years ago.
I have a bootstrap, 3 column web page. Currently there is a small amount of space between each column that I would like to remove. How can I do this without editing the bootstrap.css file? Thank you.
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="customDiv">
<div id="collapsible-panels">
<p>Question One goes here?</p>
<div><p>Page 2</p></div>
<p>Question Two goes here?</p>
<div><p>Answer to Question Two goes here.</p></div>
<p>Question Three goes here?</p>
<div><p>Answer to Question Three goes here.</p></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="customDiv">Main Content Area</div>
</div>
<div class="col-md-2">
<div class="customDiv">Right Side Bar</div>
</div>
</div>
</div>
Remove padding-left & padding-right from col-*-* classes in a new css file by giving them an additional class (in my case div-holder), like:
CSS:
.div-holder {
padding-left: 0;
padding-right: 0;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-2 div-holder">
<div class="customDiv">
<div id="collapsible-panels">
<p>Question One goes here?</p>
<div><p>Page 2</p></div>
<p>Question Two goes here?</p>
<div><p>Answer to Question Two goes here.</p></div>
<p>Question Three goes here?</p>
<div><p>Answer to Question Three goes here.</p></div>
</div>
</div>
</div>
<div class="col-md-8 div-holder">
<div class="customDiv">Main Content Area</div>
</div>
<div class="col-md-2 div-holder">
<div class="customDiv">Right Side Bar</div>
</div>
</div>
</div>
I have a problem with Bootstrap columns - there is an empty space between the columns like it's shown in the picture:
My code is straightforward - one div with class row for all columns and each column has class col-xs-2
<div class="row">
<div class="col-xs-2">
.... checkboxes with labels....
</div>
/* col-xs-2 is repeated a few times */
</div>
I've read about clearfix on similar posts here on StackOverflow but I don't know how to apply it in my case. Thanks for any help provided!
Spilt the two columns first and then start a new row like so:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
Red box content
</div>
</div>
<div class="row">
<div class="col-md-12">
blue box content
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
green box content
</div>
</div>
<div class="row">
<div class="col-md-12">
Other box content
</div>
</div>
</div>
</div>
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>