In displays bigger than mobile I'd like to have this disposition (in this order):
column-A large 2 -
column-B large 8 -
column-C large 2
In mobile I'd like to have (in different rows) the shift of the first column after the second one:
column-B large 12 -
column-A large 6 -
column-C large 6
Someone could tell me if it is possibile and if yes how should I do? Thanks
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8"></div>
<div class="col-lg-2"></div>
</div>
</div>
If you're doing mobile first, you should define the columns in the HTML in the order you want first:
<div class="container">
<div class="row">
<div class="col-12">
B
</div>
<div class="col-6">
A
</div>
<div class="col-6">
C
</div>
</div>
</div>
That makes sure it will look like what you want in small devices. And then we can add more styles for large devices.
Then on bigger devices (you said bigger than mobiles), that corresponds to col-md-* class in bootstrap. You can add that to the columns.
Also since you want column A appear first, you can set their orders by using bootstrap class order-md-*. The smaller the order, the earlier position it will get.
<div class="container">
<div class="row">
<div class="col-12 col-md-8 order-md-2">
B
</div>
<div class="col-6 col-md-2 order-md-1">
A
</div>
<div class="col-6 col-md-2 order-md-3">
C
</div>
</div>
</div>
The result:
See fiddle: http://jsfiddle.net/aq9Laaew/61343/
To mobile use col-*:
Learn here :https://getbootstrap.com/docs/4.0/layout/grid/
and use order:https://getbootstrap.com/docs/4.0/utilities/flex/#order
See fiddle:https://jsfiddle.net/L50gsumj/3/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-6 order-2 order-md-1">a</div>
<div class="col-md-8 col-12 order-1 order-md-2">b</div>
<div class="col-md-2 col-6 order-3 order-md-3">c</div>
</div>
</div>
Related
I have a question about the bootstrap 4.1 reordering. According to the documentation:
Reordering
Use .order- classes for controlling the visual order of
your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1 .order-md-2). Includes support for 1
through 12 across all five grid tiers.
I've tried to set the reordering only on small and medium screens, using the .orderclasses as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>
You need re-order in larger breakpoints, because bootstrap is mobile first approach, (it means it is using min-width in media queries), so when only using sm it will apply properties from sm and up (including md and lg).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>
One more thing to know about order in BS4, is that you can you use order-X-first, order-X-last and order-X-0, so here a snippet with those classes. You can see them in this answer
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>
This is the default behavior of Bootstrap and is expected.
To say it in short words, all bootstrap's breakpoint suffixes (-sm -md ...) work from that breakpoint upward.
So if you set col-sm-6 that means your column will be half the size of row from in sm breakpoint and md and lg unless you overwrite it (e.g. col-md-2 ).
It all goes back here (using min-width in media queries)
Here is an example, how you can do this with media queries:
<div class="row">
<div class="col-12">
<!-- some content -->
</div>
<div class="col-md-9">
<!-- some content -->
</div>
<div class="col-md-3 move-down">
<!-- some content -->
</div>
<div class="col-md-6 move-up">
<!-- some content -->
</div>
<div class="col-md-6">
<!-- some content -->
</div>
</div>
#media (max-width: 767px) {
.move-down {
order: 2;
}
.move-up {
order: 1;
}
}
Have you tried doing order-1, this sets the default for larger screens
<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
<!-- some contents here -->
</div>
Source: Column ordering in Bootstrap 4
I ran into some issues with this as well. Here's the following code that got it to work for me:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class="col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>
Edit: Removed .order-md class from respective columns.
I have two rows which contain 3 column each , I would like at certain breakpoint to switch from 3 columns to 2 column and from 2 columns to 1 column (mobile breakpoint). so far this is what I have.
#media (min-width:768px) {
.col-md-4{
min-width: 50%;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row" >
<div class="col-md-4">4</div>
<div class="col-md-4">5</div>
<div class="col-md-4">6</div>
</div>
Question
This does not work , what am I missing in my code? help am newbie though
I would place them all in the same .row and use the appropriate grid classes. This should get you what you want:
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
Note: I would not redefine .col-md-4 or any of the Bootstrap built-in grid glasses like that.
For more details, read the Bootstrap documentation on using grid glasses: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Just use the different breakpoint column classes of bootstrap.
If you want to change order in bootstrap 3 (as requested in comments) you can easily use push and pull.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
<div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
<div class="col-md-4 col-sm-6">3</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Use col-sm-6 to set 2 divs in 1 row on sm size...
(the calc is: 12/6=2 => 100% /2=50% means each div gets 50% to his width)
By default in xs size's screen will set 1 div in 1 row because you did not specify otherwise...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
</div>
<div class="row" >
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
</div>
I'm using Bootstrap 4 for the first time. I want to have a website with blank columns on left and right in large view but make them disappear in small view.
I use this HTML structure to create the 3 columns: blank ones and the grey one we can see in the middle:
<div class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col-sm-12 col-md-8"></div>
<div class="col"></div>
</div>
</div>
But because of the min-height: 1px; which is applied to all the .col-* by Bootstrap, when the blank columns should be hidden, they create a little space, breaking what I want to do.
How can I do what I want? Is the way I'm using Bootstrap 4 the good?
To center a column (.col) in a row (.row) you can add the class justify-content-center (see flex utilities) to the row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col col-sm-12 col-md-8">Hello World</div>
</div>
</div>
So there is no need for empty columns to center a column.
Another solution would be to use the d-* classes (see utilities) to hide the columns:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col d-none d-md-block">1</div>
<div class="col-sm-12 col-md-8">2</div>
<div class="col d-none d-md-block">3</div>
</div>
</div>
Looking at bootstrap v4 updates:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
But when I use the order function it doesn't seem to work the same as the push pull method. It stacks the rows up just like the first row in the code below.
My goal is to have a img on the left with text on the right on one row then text on the left and a img on the right on the next row on a desktop. When its resized in a smaller screen I would like each image stacked on top of the text it corresponds with.
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>
If you want to change order for example on md you can define first normal order for that size and then order-n for all smaller sizes. So your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
img
</div>
<div class="col-md-8">
text
</div>
</div>
<div class="row">
<div class="col-md-8 order-2 order-md-1">
text
</div>
<div class="col-md-4 order-1 order-md-2">
img
</div>
</div>
</div>
I want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).
How do I get them to resize into smaller buttons, and not split onto a new line?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example!</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-3 col-xs-offset-4">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.
To fix the buttons being cut off, remove the btn-block class.
Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
Add Item
</div>
<div class="col-sm-3 col-xs-6">
Remove Item
</div>
</div>
As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.
If i am clear then try my updated code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
Add Item
</div>
<div class="col-sm-3 col-xs-6 text-center">
Remove Item
</div>
</div>
You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4
Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.
<div class="form-group">
<div class="col-xs-3 col-xs-offset-6">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>