I'm having a little trouble aligning my columns in bootstrap the way I like. This is what I'm looking for:
I've been fooling around with this, and I've been able to get A and B aligned okay, but E is usually too far down on the page. C, D, and F all align perfectly, but I'm having trouble nesting B & E properly. Either B is aligned with A, and E will align with C/D, and F will render on the page below E, on the left side of the page.
See example fiddle
HTML
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12 box a">
A
</div>
</div>
<div class="row">
<div class="col-xs-6 box">
C
</div>
<div class="col-xs-6 box">
D
</div>
</div>
<div class="row">
<div class="col-xs-12 box">
F
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12 box">
B
</div>
<div class="col-xs-12 box e">
E
</div>
</div>
</div>
</div>
</div>
Try this code in your application with bootstrap div classes:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">
<div class="row">
<div class="col-sm-12" style="background-color:lavenderblush;height:100px">A</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:green;height:50px">C</div>
<div class="col-sm-6" style="background-color:yellow;height:50px">D</div>
</div>
<div class="row">
<div class="col-sm-12" style="background-color:black;height:50px">F</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="row">
<div class="col-sm-12" style="background-color:blue;height:50px">B</div>
</div>
<div class="row">
<div class="col-sm-12" style="background-color:pink;height:150px">E</div>
</div>
</div>
</div>
</div>
</body>
But First you have to use bootstrap.min.css,bootstrap.min.js,jquery.min.js files in your application.
Related
Using CSS, how can I achieve the following layout?
Notice that the order of the elements is different on mobile vs desktop!
Currently, I am using bootstrap 4. The following code "works" for the desktop version, however, does not work for the mobile version.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="a">
A
</div>
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
<div class="c">
C
</div>
</div>
</div>
</div>
How can I achieve the desired layout? I am considering solutions using:
Bootstrap 4
Flexbox
CSS Grid
The Bootstrap 4 way to get the order you want, and make columns "fit" together is to disable flexbox and use floats for the desktop layout...
"Fit" masonry layout with floats and reordering
<div class="container">
<div class="row no-gutters d-block">
<div class="col-md-4 float-left">
<div class="a">
A
</div>
</div>
<div class="col-md-8 float-left">
<div class="b">
B
</div>
</div>
<div class="col-md-8 float-right">
<div class="c">
C
</div>
</div>
<div class="col-md-4 float-left">
<div class="d">
D
</div>
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV
Same heights layout with flexbox and reordering
<div class="row text-white no-gutters">
<div class="col-md-4">
<div class="a">
A
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
</div>
<div class="col-md-4 order-last order-md-0">
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="c">
C
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV (option 2)
Related: Bootstrap row with columns of different height
Seeing as you're already using Bootstrap, you can use pushes and pulls to achieve this:
<div class="container">
<div class="row">
<div class="a col-md-4">
A
</div>
<div class="b col-md-8">
B
</div>
<div class="c col-md-8 col-md-push-4">
C
</div>
<div class="d col-md-4 col-md-pull-8">
D
</div>
</div>
</div>
See this example: https://codepen.io/bretteast/pen/VxKyLX
And these docs: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I have a row with four containers, each col-md-6. Is there a way to position the third container such that it occupies the vertical space above it? I could make two columns, but the content of containers 2 and three could get large, so i would like the containers to rearrange based on the most efficient layout.
Bootstrap Columns
```
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
It's a really interesting problem. Pity that you did not write an example of the code. Maybe you should consider to rearrange container on two separate columns (like in the code below) but I hope someone can answer this question better than me.
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content1 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content2 item-content">
...
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content3 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
</div>
</div>
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?
See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?