this is my situation with bootstrap I put 2 blocks next to each other:
class="col-6 col-sm-6 col-md-6 col-lg-6"
At a certain point when we reach 1000px I want the boxes to be among each other like this:
this now only happens when i reach 576px,
does someone how i can accomplish this.
code:
<div class="col-sm-6">
<div class="modal-dialog modal-dialog-enable">
<div class="modal-content modal-dialog-enable" >
<div class="modal-header modal-dialog-enable">
</div>
<div class="modal-body modal-dialog-enable">
<p>
</p>
</div>
<div class="modal-footer modal-dialog-enable">
</div>
</div>
</div>
</div>
THX a lot
You can read this information:
"At a certain point when we reach 1000px I want the boxes to be among each other like this."
1000px belongs medium, and now display 2 columns (each has 50% width).
Way 1: Rewrite class name
<div class="col-6 col-sm-6 col-md-12 col-lg-6">First column</div>
<div class="col-6 col-sm-6 col-md-12 col-lg-6">Second column</div>
Way 2: Overwrite default bootstrap.min.css
#media (min-width: 992px)
.col-md-6 {
width: 100%;
}
Related
<div class="row">
<div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 data-one">
<one />
</div>
<div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-two">
<two />
</div>
<div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-three">
<three />
</div>
</div>
#media screen and (min-width: 500px) and (max-width: 992px) {
.data-one {
}
.data-two {
}
.data-three {
}
}
Using bootstrap grid system, how to make responsiveness. like below.
enter image description here
and i am also having issue like, when elements touch each other, getting collide(intersecting each other).
Any example will be helpful thanks.
So on a Bootstrap row with three items, using col-md-12 as one of the classes doesn't make much semantic sense. Essentially because a col-12 is supposed to span the full-width. For a responsive Bootstrap design, it would be semantically correct to use col-lg-4 for large screens, col-md-4 for medium screens, and it will use col-sm-4 for mobile devices like phones. I added w-100 for 100% width and text-center to align text to the center. See the changes I made below.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<div class="container w-100">
<div class="row text-center">
<div class="col-lg-4 col-md-4 col-sm-4">
One
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
Two
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
Three
</div>
</div>
</div>
On my page I have a calendar, I want it to be responsive, so that On Large screens it will look like this:
[Jan] [Feb] [Mar]
[Apr] [May] [June]
[July] [Aug] [Sept]
[Oct] [Nov] [Dec]
When resizing to middle this:
[Jan] [Feb]
[Mar] [Apr]
[May] [June]
[July] [Aug]
[Sept] [Oct]
[Nov] [Dec]
The problem is that I group them by 3 elements to one row (large screens view).
(I assigned these classes to my "months": class="col-lg-4 col-md-6")
So when I change screen size to middle it is still grouped in rows and looks so:
[Jan] [Feb]
[Mar]
[Apr] [May]
[June]
[July] [Aug]
[Sept]
[Oct] [Nov]
[Dec]
Is there any way to solve this?
you can just use one .row and use .clearfix visible-lg-block for large screens at each 3nth item. See Bootstrap Docs about Responsive Columns Resets
[class^="col-"] {
border: solid red;
height: 50px;
text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">Jan</div>
<div class="col-md-6 col-lg-3">Feb</div>
<div class="col-md-6 col-lg-3">Mar</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Apr</div>
<div class="col-md-6 col-lg-3">May</div>
<div class="col-md-6 col-lg-3">Jun</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Jul</div>
<div class="col-md-6 col-lg-3">Aug</div>
<div class="col-md-6 col-lg-3">Sep</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Oct</div>
<div class="col-md-6 col-lg-3">Nov</div>
<div class="col-md-6 col-lg-3">Dez</div>
</div>
</div>
I'm having some trouble with a layout I'm producing. I am dealing with blocks of content that are generated from my database, so I'm essentially ending up with:
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
... etc
The problem is, as the columns are floated they are ending up stacking on top of each other in the event that one has more content than the other.
I know that technically I should be using rows like so:
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
Except, obviously, on larger screens I need to have three elements per row.
Is there a way around this or a CSS rule I can add to clear the floated elements and keep everything lining up at both the lg and sm breakpoint?
Demo: http://codepen.io/EightArmsHQ/pen/RWoMmM
You could add something like this:
/* On medium screens, clear every 2 elements starting at 3rd element */
#media(min-width: 768px) and (max-width: 1199px){
.row > div:nth-child(2n+3){
clear: both;
}
}
/* On large screens, clear every 3 elements starting at 4th element */
#media(min-width: 1200px){
.row > div:nth-child(3n+4){
clear: both;
}
}
Can I mix different columns (col-xs-, col-sm- etc) in my layout?
For example, I have:
<div class="col-xs-12">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
and more many col-xs columns.
But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
And it works, but this is correct with bootstrap grid system and standards?
Or Maybe I have to add "col-sm-*" to others? :
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Or maybe I have to keep "col-xs-12"?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Which versions is correct? How do I properly mix different types of columns?
Bigger sizes override smaller sizes (e.g. col-sm will override col-xs unless the screen is smaller than col-sm). Personally I always add a col-xs and I only add the bigger sizes when I need them.
Example:
<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
...
</div>
This information is all found in Bootstrap's Documentation. It is perfectly fine to add multiple col-*-* classes to a <div> element:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>
Is a perfectly viable class structure, that renders different column sizes depending on the current size of the viewport. If xs, it would be a full-width column. Small is half, medium is a 3rd and large is a 4th (based on a 12 column layout.)
If you need more information, take a look here:
Bootstrap Grid System
All the other answers explain what overrides what, but to answer your question about what you have to have, the default is 100% width. So if you only specify:
<div class="col-sm-6">
...
</div>
then when you get smaller than 768px it will go from 50% (6 columns) to 100 (12 columns)
Column sizing will default with the smallest size first (xs) with subsequent classes overriding the original size.
For example:
<div class="col-xs-12"></div>
Will appear as with 100% width on all browsers.
The following will appear as 100% on mobile browsers and 50% on tablets and up.
<div class="col-xs-12 col-sm-6"></div>
Is it possible to do this?
I have 3 columns in a row. The first column has 2 nested row - top and bottom.
Is it possible to have the bottom row of the first column to be at the fourth position is the mobile view?
Here is my code:
http://www.bootply.com/yhhFaWRjC6
Edit:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row" style="height:100%;">
<div class="col-md-4 col-lg-4 col-sm-12" style="background-color:#ccc;height:100%; padding:0px;">
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#d33;">one</div>
</div>
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#edd;">four</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#e42;">two</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#444;color:#fff;">three</div>
</div>
</div>
I want to make it the sequence to be:
- one
- two
- three
- four
In mobile
Assuming the first column to be less in height than both the second and third column I'm afraid you can only achieve this by:
Duplicating the content of the fourth column and showing/hiding it based on the grid size (e.g. xs). I'll show an example of this below.
Using JavaScript to move the content of the fourth column when the grid size changes. I have a small prototype of a jQuery plugin to facilitate this at https://github.com/ckuijjer/jquery-breakpointspy
Create your own grid system using flexbox. This might be an option if you don't have to support IE9 or lower.
I've implemented the first option below, and made some additional changes:
I've moved the inline styling into classes named .one, .two, .three and .four to make the code a little bit more clean.
I've started with the mobile layout and gave all classes col-xs-12. This makes a column take up 12 columns from the size xs onwards.
<div class="container">
<div class="row">
<div class="col-xs-12 one">one</div>
...
<div class="col-xs-12 four">four</div>
</div>
</div>
As we want to have each column take up a fourth of the container, I've added col-md-4 to each of the columns. Each column now looks like e.g. <div class="col-xs-12 col-md-4 one">. There is no need to add col-lg-4 nor col-sm-12.
Showing a column only on a specific grid size can be done by e.g. visible-xs-block. As we want the fourth column to only be visible on xs and sm I've changed the html into <div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>. Notice that I've dropped the col-md-4 as there is no need for that anymore.
To put the fourth column below the first column when the screen is md or lg the first column is changed into a nested grid. I've opted not to use a second .row as having more than 12 columns will make the next column drop anyway and used .col-xs-12 as I always want a column to have a bootstrap grid class on it, regardless of the screen size. I could've used visible-md-block and visible-lg-block to make it show on md and lg only, but for fun I've used its opposite, hidden-xs and hidden-sm.
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
See the entire code below:
.one {
height: 180px;
background-color: #d33;
}
.two {
height: 360px;
background-color: #e42;
}
.three {
height: 360px;
background-color: #444;
color: #fff;
}
.four {
height: 180px;
background-color: #edd;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
<div class="col-xs-12 col-md-4 two">two</div>
<div class="col-xs-12 col-md-4 three">three</div>
<div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>
</div>
</div>