Is below layout possible in bootstrap row and column (or in CSS in general?) - The id of column would have to stay in that order for mobile view.
[1][2]
[3][2]
[2]
[2]
[2]
<div class="row">
<div class="col-md-3">Block 1 - sidebar</div>
<div class="col-md-9">Block 2 - will be long - main content </div>
</div>
<div class="row">
<div class="col-md-3">Block 3 - will continue as a sidebar.
</div>
</div>
I would have something like this:
[Sidebar][Main]
And the Sidebar as:
[1]
[3]
So the final result would be:
<div class="row">
<div class="sidebar col-md-3">
<div class="row">
<div class"main col-md-3">
Sidebar 1
</div>
<div class"main col-md-9">
Sidebar 3
</div>
</div>
</div>
<div class"main col-md-9">
Main
</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
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>
I've got the following layout using Bootstrap:
[1][2]
[3]
It stacks in one column on handheld devices like this:
[1]
[2]
[3]
I need it to stack like this:
[1]
[3]
[2]
How is this done?
You could use nesting like this..
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
<div class="col-md-6">
2
</div>
</div>
Demo: http://codeply.com/view/NxRorezDfU
There is a feature in Bootstrap called column ordering.
Here is an working example for your needs:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-5 ">
Content 1
</div>
<div class="col-sm-5 col-sm-push-5">
Content 3
</div>
<div class="col-sm-2 col-sm-pull-5">
Content 2
</div>
</div>
</div>
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.
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>