Show 1 row on desktop and 2 rows on mobile - css

This basic bootstrap CSS shows me 4 columns on 1 row:
<div class="row">
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
</div>
For the mobile view I would like to display 2 columns on 2 rows. The only way that I know how to do this is to create the same content twice ... something like this:
<div class="desktop">
<div class="row">
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
</div>
</div>
<div class="mobile">
<div class="row">
<div class="col-xs-6">
Text
</div>
<div class="col-xs-6">
Text
</div>
</div>
<div class="row">
<div class="col-xs-6">
Text
</div>
<div class="col-xs-6">
Text
</div>
</div>
</div>
So you can set display:none for the classes desktop and mobile using #media ...
That would work but it is not the cleanest solution. Would there be another way to do this?


You don't have to write separate code for smaller devices and larger devices. Following code snippet will serve your purpose.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 col-xs-6">
1
</div>
<div class="col-md-3 col-xs-6">
2
</div>
<div class="col-md-3 col-xs-6">
3
</div>
<div class="col-md-3 col-xs-6">
4
</div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 col-xs-6">
1
</div>
<div class="col-md-3 col-xs-6">
2
</div>
<div class="col-md-3 col-xs-6">
3
</div>
<div class="col-md-3 col-xs-6">
4
</div>
</div>

Related

Padding between columns in CSS

I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!

Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>

Bootstrap 3 row and col order on small screens

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>

Bootstrap 3 two responsive rows next to each other?

I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>

.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>

Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting

Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.

You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/

Best approach to divide Bootstrap grid columns

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.

Bootstrap more then 12 units [duplicate]

This question already has answers here:
Bootstrap 3 - Use more than 12 columns in a row
(3 answers)
Closed 4 years ago.
sometimes it works perfect, sometimes i have big problems with the following ..
Can i write it like this?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
Or does i have to seperate each "row"?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
in my current project the floating issn't correct so that the last column doesnt have the right margin..

Either you can use smaller units instead of larger ones, i.e., .col-md-3 instead of .col-md-6 or use fluid layout.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
<div class="container-fluid">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your first example reacts exactly as it should. Any time you have more than 12 cols, the offending cols bump down to the next row (not .row which is different). Because you have 16 cols, the last group of 4 sits on next row.
To fit 16 sections on a single visible row (again, not .row), you will need to nest columns like so:
http://www.bootply.com/2VfLJXjcXt
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test1
</div>
<div class="col-md-3">
Test2
</div>
<div class="col-md-3">
Test3
</div>
<div class="col-md-3">
Test4
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test5
</div>
<div class="col-md-3">
Test6
</div>
<div class="col-md-3">
Test7
</div>
<div class="col-md-3">
Test8
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test9
</div>
<div class="col-md-3">
Test10
</div>
<div class="col-md-3">
Test11
</div>
<div class="col-md-3">
Test12
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test13
</div>
<div class="col-md-3">
Test14
</div>
<div class="col-md-3">
Test15
</div>
<div class="col-md-3">
Test16
</div>
</div>
</div>

Resources