Im fairly new to bootstrap and the concept of responsive design.
I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions col- must = 12 in a single row class. They also mention you can combine different col classes and sizes example <div class="col-md-3 col-xs-6">
What I am not getting is when should you break the viewport with the </row> class when you combine different col sizes ?
Consider the following, where I want a mobile device to display 2 rows and 2 columns and on desktop a single column with 4 rows
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
Considering all columns inside rows must = 12, the row class would need to be closed on different points for mobile and desktop...?
How would I tackle the above problem, hope the question makes sense.
Thank you
Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".
It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...
From the Bootstrap docs:
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"
That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.
There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.
Similar Questions..
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - row can I have columns add up to more then 12?
Just change the "col-md-3" class to "col-md-12" in all divs to show 4 rows and single column on desktop and two rows and two columns on mobile.
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows
It's just proper nesting..the problem that you have mentioned in your question can be solved in the following way--
As you can see a mobile device will display 2 rows and 2 columns and on desktop a single column will have 4 rows--
Although it can be achieved using many other div nesting methods, I have shown only one such configuration to achieve your desired layout.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.btn-xs {
display: inline-block;
margin-right: 2%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
AAAAAAA
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
BBBBBBBBBB
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
CCCCCCCCCCC
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
DDDDDDDDDDD
</div>
</div><!--/row -->
</div><!--/container -->
</div>
</body>
</html>
Related
i am trying to set up three columns but they are laid out directly beside each other, no gutters.
seemingly, i can also put an endless amount of columns across the row and the "4" specification will not stop at 3 columns.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>Test<br>Test description</p>
</div>
<div class="col-xs-4">
<p>Test<br>Test description</p>
</div>
</div>
</div>
In head, try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
That is cdn to bootstrap version 3
Grid in bootstrap is 12. if you need for 4 row. you can add .row again in another div you can see documentation here
I have the following HTML code using Bootstrap 4:
<div class="row">
<div class="col-12 col-sm-4">
First, but unordered
</div>
<div class="col-12 col-sm-4">
Second, but unordered
</div>
<div class="col-12 col-sm-4 order-sm-1">
Third, but first
</div>
</div>
I am expecting the third div to be placed in first position on sm screens but it is not. Here is a JSFiddle What have I missed? Thanks!
The order class is not really handeling the order of the elements it's instead like a swap system. So you need to declare an order in other divs too
<div class="row">
<div class="col-12 col-sm-4 order-sm-12">
First, but unordered
</div>
<div class="col-12 col-sm-4 order-sm-12">
Second, but unordered
</div>
<div class="col-12 col-sm-4 order-sm-1">
Third, but first
</div>
</div>
Here's a Fiddle
EDITED
I am changing the code in order to adapt it for bootstrap 4 after user comment of #Andrei Gheorghiu
you can use the class order-sm-first which sets the to order=-1, with this code the third div will be displayed as first for screens that are sm or larger meaning larger than 576px
<div class="row">
<div class="col-12 col-sm-4">
First, but unordered
</div>
<div class="col-12 col-sm-4">
Second, but unordered
</div>
<div class="col-12 col-sm-4 order-sm-first">
Third, but first
</div>
</div>
here you can see the forked version of you jsfiddle
tl;dr:
Change your markup to:
<div class="container">
<div class="row">
<div class="col-12 col-sm-4">
First, but unordered
</div>
<div class="col-12 col-sm-4">
Second, but unordered
</div>
<div class="col-12 col-sm-4 order-first order-md-0">
Third, but first
</div>
</div>
</div>
the details
.order-sm-1 will place order: 1 on the element, according to lines #53-#55 in _grid-framework.scss:
#for $i from 0 through $columns {
.order#{$infix}-#{$i} { order: $i; }
}
But placing order: 1 on one column without the rest having an order will send that column at the end of the stack, because the default value of order is 0. Any following siblings without an order will be placed before your column.
In the same file, at line #49, we find .order#{$infix}-first (which sets order:-1). This will place a column before the rest, as well as .order#{$infix}-last will place it after all the rest.
To sum up:
use .order-sm-last and .order-sm-first to make a column go to front or back of the stack
use .order-sm-#{n} to give it an order but also set the order on siblings (order-sm-1 will make a column first if you place order-sm-2 (or higher - up to 12) on the other columns).
Note they only defined 12 levels for order, .order-sm-13 won't work, unless you define it yourself.
As a final note: if you want your column ordered on sm and below, your should replace order-sm-1 with order-first order-md-0. .order-first makes it first on all intervals and .order-md-0 sets its order back to 0 on md and above, so it keeps its place in the layout:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12 col-sm-4">
First, but unordered
</div>
<div class="col-12 col-sm-4">
Second, but unordered
</div>
<div class="col-12 col-sm-4 order-first order-md-0">
Third, but first
</div>
</div>
</div>
I am trying to learn Bootstrap grid more. I am trying to get two columns in two rows in the middle of my page.
So it should look like this:
Here is what I got so far:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>Text 1</label>
</div>
<div id="text2">
<label>Text 2</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text3">
<label>Text 3</label>
</div>
<div id="text4">
<label>Text 4</label>
</div>
</div>
</div>
</div>
But my elements are not in place where I want them.
Here is the solution in a fiddle: Solution 1
Now for the explanation of the problem:
First you need to set specific columns. Keep in mind that Bootstrap has a grid of 12. So your maximum can be 12 at all time. However, you don't need to have the columns fill the entire grid.
You can use something called offset which allows you to put empty space in your elements. Having the class class="col-md-5 col-lg-5 col-sm-5 offset-1" gives you a column with a value of 5 so you can actually position 2 columns and have space on the side.
I would suggest to go through the Bootstrap grid and play around in order to get a familiar feeling on how to manipulate it.
The style sheet margin-left:25px; margin-top:25px; gives you the space on the top and on the side of the columns themselves.
I know you can nest rows within nested columns, but is it 'against the rules' to nest rows directly within rows?
eg:
<div class="row">
<div class="row">
cols in here
</div>
<div class="row">
cols in here
</div>
<div class="row">
cols in here
</div>
</div>
Or must these always be within columns?
is it 'against the rules' to nest rows directly within rows?
Not against the rules as such, but not a best practice as per the guidelines.
Per bootstrap guidelines, third point under introduction -
..and only columns may be immediate children of rows".
*Edit: This is still true with Bootstrap 4.0 Beta. The link to the docs above will automatically redirect to the version 3.3 documentation. Thank you #Aakash for pointing this out.
This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-row pattern i.e. nest a row with one column across to nest.
See the difference in the snippet below. The first set of markup breaks the Bootstrap layout, although nothing bad happens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="row">
<div class="col-xs-6">One</div>
<div class="col-xs-6">Two</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">One</div>
<div class="col-xs-6">Two</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12">One</div>
<div class="col-xs-12">Two</div>
<div class="col-xs-12">Three</div>
</div>
</div>
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.