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>
Related
I'm trying to make three new columns inside the my center column. But when I nest, they do go inside the centered column, but they also stack at the bottom of it. I'm interested in the center column can work as a background kind of like a container for the other three columns.
Maybe this is not how to use Bootstrap and columns? Should I instead just created some three divs that are not columns, but regular divs inside the column?
I'm trying to design a website where it has tree major columns, in which inside the center columns there should be three evenly spaced boxes/images/blocks.
I'm using Bootstrap version: 4.6.1
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="bg-secondary col-sm-2">
1
</div>
<div class="bg-primary col-sm-8">
2
<div class="row">
<div class="bg-warning col-sm-4">
2.1
</div>
<div class="bg-warning col-sm-4">
2.2
</div>
<div class="bg-warning col-sm-4">
2.3
</div>
</div>
</div>
<div class="bg-secondary col-sm-2">
3
</div>
</div>
</div>
I'm trying to get my column (bg-primary col-sm-8) in the center to get three more columns inside it:
For what you want, you need to use flex utility classes
.container-fluid {
height: 100vh
}
.box {
border: 5px solid red;
padding: 30px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-100">
<div class="bg-secondary col-sm-2">1</div>
<div class="bg-primary col-sm-8">
<div class="row justify-content-around align-items-center h-100">
<div class="box">2.1</div>
<div class="box">2.2</div>
<div class="box">2.3</div>
</div>
</div>
<div class="bg-secondary col-sm-2">3</div>
</div>
</div>
I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row.
Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.
Please refer to the image for the output of my code.
(https://i.stack.imgur.com/SlfyQ.png)
Actually I want my output like below code:
[Required or Expected output][1]
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<div style="float:right;">.col-sm-6_Part-2</div>
<div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
</div>
</div>
</div>
What should I use to get it correct? Please help. Thanks in advance !!
Below is the current/wrong code.
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
</body>
Replace row class with row-fluid:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row-fluid">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
Here. I know you are using bootstrap v2 and I understand why but do this.
Do this
<div class="row" style="display: flex; justify-content: space-between">
I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element
It will put first span to left second span to center and third span to right of the screen.
Is this what you want to do? If not then post in comments.
UPDATE
If you only want to push the third element to the right and leave other two on their current places you can do this
<div class="span4" style="background-color:lavender; float: right">span4</div>
It will float that element to the far right of its parent
UPDATE 2
Based on new info I got from comment here is the solution
<div class="row">
You need
<div class="row-fluid">
row-fluid will take the whole width of parent and spans will stretch
This is a bootstrap 2 feature. Read more about it here
check this:
minimum amount of code:
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
</div>
</div>
check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/
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>
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 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>