I want to change one of my columns number when resizing screen to md (width 1024px).
Something like this:
[.col-md-2][.col-md-8][.col-md-2] becomes [hidden][.col-md-12][hidden]
My current code:
<div class="col-md-2 hidden-md"></div>
<div class="col-md-8"></div>
<div class="col-md-2 hidden-md"></div>
How do i change <div class="col-md-8"></div> to <div class="col-md-12"></div> on resize?
Try following code. this will expand the middle column on small screen devices.
<div class="col-md-2 hidden-sm"></div>
<div class="col-md-8 col-sm-12"></div>
<div class="col-md-2 hidden-sm"></div>
but make sure your bootstrap must be customized and #screen-sm must start from 1024 for this
If not then you will need to add custom css for 1024 resolution using media queries
col-md-8 {
width: 100%;
}
col-md-2 {
display: none;
}
Try to use #media as follows :
#media screen and (min-width:1024px){
.hidden-md{
display:none;
}
}
Hope this helps.
I found an answer for this after some time, its really simple and doesn't require any custom #media css or any custom css code whatsoever. Hers the html:
<div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"></div>
<div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>
1st and 3rd column become 'invisible' on 'md' size and 2nd column become full size (12)
Try like this: Updated Demo
<div class="col-lg-2 hidden-md"></div>
<div class="col-sm-12"></div>
<div class="col-lg-2 hidden-md"></div>
For Reference 1 reference 2
Related
Given the following BS4 layout, how can I make Column 3 disappear instead of being stacked right at the bottom of the viewport once the breakpoint is reached.
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-md-3">
I am Column 1
</div>
<div id="col2" class="col-md-4">
I am Column 2
</div>
<div id="col3" class="col-md-5">
I am Column 3, I should disappear once the breakpoint is reached!
</div>
</div>
</div>
Using vanilla CSS, I would do something like this:
#media only screen and (max-width: 600px) {
#col3 {
display: none;
}
}
However, I want a solution which will work even if further down the road I decide to change the minimum width to sm, lg or xl.
Based on the official documentation, you should use Display Property Utilities like this:
<div id="col3" class="col-md-5 d-sm-none d-md-block">
I am Column 3, I should disappear once the breakpoint is reached!
</div>
I'm using bootstrap to make a website, but it's something is wrong.
I want to make 2 rows and 3 columns and when the screen changes to mobile, I want it to be 3 rows and 2 columns.
Desktop
|A| |B| |C|
|D| |E| |F|
Mobile
|A| |B|
|C| |D|
|E| |F|
I used the code below to do it, but the images don't stay like I want it to.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
</div>
The images stay like this
|A| |B|
|C|
|D| |E|
|F|
Thanks in advance!
4 columns on desktop and 2 columns on mobile:
<div class="row">
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
</div>
May need to add class fluid to image object to keep the image responsive within div.
I have run into this problem before. The issue has been that my content is different heights. Because Bootstrap uses floats to arrange it's columns your column C cannot float all the way to the left if your column A is taller than column B.
I have included a link to a codepen so you can see it in action. The top two rows are exactly your code above while the bottom two rows show a div with a different height than the other divs.
http://codepen.io/egerrard/pen/PGRQYK
The solution for you will be to set the height of your divs to the max height for all your content. Something like
.maxHeightDiv {
height: 200px;
}
You'll probably have to set heights for different window widths. It can be a little annoying but this is a caveat of the bootstrap float system.
I am using Stacked to Horizontal & Mix and Match in Boostrap.
1. Stacked to Horizontal
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Desktop View:
Mobile View:
2. Mix and Match
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Desktop View:
Mobile View:
Read More: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Read More: https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal
Even though this is old maybe it helps some of you.
My way is more code than probably necessary but I couldn't came up with a bootstrap grid system solution that provides different column and row changes in combination with screen width changes.
So lets start:
Switching to .scss and implement bootstrap responsive functions
Include a parent div which acts as a view toggle container for your bootstrap gird system
Usage of display: none !important and display: inline !important for the divs
A hint, set the width of the image class to max-widht: 100%;, it will force the images to take as much place as they can without exceeding its parent width; unless you want different unique sizes of course
.scss: (check your bootstrap css version )
$stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;
#mixin stage00 {
#media (max-width: $stageZero) { #content; }
}
#mixin stage01 {
#media (min-width:$stageOneLower) and (max-width:$stageOneHigher) { #content; }
}
#mixin stage02 {
#media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { #content; }
}
#mixin stage03 {
#media (min-width: $stageThree) { #content; }
}
.mobileViewToggle {
#include stage00 {display: inline !important;}
#include stage01 {display: none !important;}
#include stage02 {display: none !important;}
#include stage03 {display: none !important;}
}
.desktopViewToggle {
#include stage00 {display: none !important;}
#include stage01 {display: inline !important;}
#include stage02 {display: inline !important;}
#include stage03 {display: inline !important;}
}
.html:
<div class="mobileViewToggle">
< Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>
<div class="desktopViewToggle">
< Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>
You can use the below class as shown...
col-xs-2 - will be two columns only on xs devices-(mobile)
col-md-3 - will be 3 columns on all devices other the mobile
<div class="row">
<div class="col-xs-2 col-md-3">Content</div>
....
</div>
You cannot change the rows however without using js.
Moreover,on mobile,does it really matters... ?
I think it's a bit tricky that I want to hide one column from a grid in bootstrap mobile version. Let's show example
<div class="row">
<div class="col-xs-9">
<p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
</div>
<div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>
Above coding, I hide image portion when viewed by mobile device. What I want is I don't want that spacing of image portion even it's hidden as increasing left portion to reach till the right side.
Since Bootstrap V4 the hidden-X classes have been removed. In order to hide a column based on the column width use d-none d-X-block. Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.
Hidden on all .d-none
Hidden on xs .d-none .d-sm-block
Hidden on sm .d-sm-none .d-md-block
Hidden on md .d-md-none .d-lg-block
Hidden on lg .d-lg-none .d-xl-block
Hidden on xl .d-xl-none
Taken from this answer.
Since, you are hiding the second column in "xs", you can use the full width for the first column by defining the class "col-xs-12" to column1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-sm-9">
<p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
</div>
<div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>
If you are using bootstrap 4, and/or want to hide a column on anything other than extra small view, here is how:
Bootstrap 3:
<div class="row">
<div class="col-lg-12 col-xl-9">
</div>
<div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs">
</div>
</div>
in other words you have to define every single individual predefined viewport size you want the column to be hidden in.
Bootstrap 4: (a little less redundant)
<div class="row">
<div class="col-lg-12 col-xl-9">
</div>
<div class="col-xl-3 hidden-lg-down">
</div>
</div>
Also, if you want to hide a column if the screen is too big:
<div class="row">
<div class="col-md-12 col-sm-9">
</div>
<div class="col-sm-3 hidden-md-up">
</div>
</div>
also note that col-xs-[n] has been replaced by col-[n] in bootstrap 4
What you have to use is media queries.
Here is an example:
#media (min-width: 1000px) {
#newDiv {
background-color: blue;
}
.col-xs-3 {
display: block;
}
}
#media (max-width: 999px) {
#newDiv {
background-color: red;
width: 100%;
padding-right: 50px;
margin-right: 0px;
}
.col-xs-3 {
display: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="newDiv" class="col-xs-9"><p>Hello World!</p></div>
<div class="col-xs-3"><p>Hello to you to</p></div>
Make this full screen to see the screen response
I'm trying to create a layout in Bootstrap that shows three blocks on a larger screen and two blocks on a smaller screen (the breakpoint occurs between sm and md).
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4">B - 100</div>
<div class="col-xs-6 col-md-4">C - 75</div>
</div>
</div>
See CodePen example
This however results in an unwanted vertical gap between block A and C.
As I see it I have a few possible options to remove the vertical gap, but perhaps there is a better solution:
Duplicate the html and use visible-sm and visible-md to show the wanted layout. On sm it would have a two column layout with the first column containing both A and C.
Disadvantage: The block content also needs to get duplicated, which might contain a lot of html
Use JavaScript to move the block to the correct column (perhaps jQuery Masonry).
Disadvantage: I would rather have a CSS only solution
Take a look at flexbox, css columns and css grid.
Disadvantage: Browser support isn't there
Imperfect untested solution at http://codepen.io/elliz/pen/fvpLl. Key points:
At small widths
break B out of flow
make container smaller
HTML
<div class="container">
<!-- note: sm -> container 50% -->
<div class="row col-xs-6 col-md-12">
<!-- note: sm -> div = 100% of container which is 50% -->
<div class="col-xs-12 col-md-4 h50">A - 50</div>
<div class="col-xs-12 col-md-4 h100">B - 100</div>
<div class="col-xs-12 col-md-4 h75">C - 75</div>
</div>
</div>
CSS Fragment
/* xs and sm */
#media ( max-width: 991px) {
.h100 {
position: absolute !important; /* better to do with specificity, but quick ugly hack */
margin-left:93%;
}
}
Spacing is not perfect, but gives you a starting point for your experiments.
Note: this can be implemented using FlexBox and Grid (when it is ready) far easier - and the latest alpha version of Bootstrap does support flexbox.
I realize you said you'd prefer a css only solution, but in my opinion what you are trying to accomplish is not what the bootstrap devs had in mind when they designed their grid system. I would use javascript to stick that sucker where you need it:
jQuery/html/css solution
I changed your columns to be containers (I called em buckets)
HTML
<div class="row">
<div class="container">
<div id="leftBucket" class="col-xs-6 col-md-4">
<div id="A" class="h50">A - 50</div>
</div>
<div id="middleBucket" class="col-xs-6 col-md-4">
<div id="B" class="h100">B - 100</div>
</div>
<div id="rightBucket" class="hidden-sm col-md-4">
<div id="C" class="h75">C - 75</div>
</div>
</div>
</div>
<div id="hiddenDiv"></div>
Then I "borrowed" an approach to watching for media queries from the link in the comment below
JS
// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){
if ($("#hiddenDiv").css("float") == "none" ){
// small screen!
$('#C').appendTo('#leftBucket');
} else {
//not a small screen :P
$('#C').appendTo('#rightBucket');
}
});
And added some rules for the hidden div (that I use to watch screen width)
CSS
#hiddenDiv {float:left;}
#media only screen and (max-width: 992px){
#hiddenDiv {float:none;}
}
ps. it's good to see people using hand drawn doodles to get their ideas across, that's how I like to break it down for people also :D
I found a clever way of doing this. Rearrange the order. Put C before B and then use push and pull to swap the order
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
<div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
</div>
</div>
I have created a fiddle with a wrapping div added with a fixed width.
For 320 screen size, reduced the wrapper width and also changed float of the B div to float: right
Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/
I have the following:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
By default, this div.span* spans the entire width of the screen, like this:
[x][x][x][x]
At a certain screen width, I want this to appear in a 2x2 grid, like this:
[x][x]
[x][x]
How do I do this?
Sorry about my earlier attempts, I did not fully understand your question:
The thing which you are trying with bootstrap is not really possible unless you go for your own #media selectors. There is a library called Neat. I think this is the example you are looking for.
EARLIER ATTEMPTS:
Try this, from here:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6">A</div>
<div class="span6">B</div>
</div>
<div class="row-fluid">
<div class="span6">C</div>
<div class="span6">D</div>
</div>
</div>
</div>
</div>
This should give you the following result:
[A][B]
[C][D]
Well that's a lot of divs. Not really sure if this can be made lighter.
The original question appears to be for an older edition of bootstrap.
Here's what solves the issue neatly in Bootstrap 3 markup. The key element is the clearfix div that affects xs and sm viewports [typical use case]. (sm not included in example below).
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
via getbootstrap.com
Here are 2 options that are responsive without the need for media queries. Resize the windows to see how they react.
CSS Columns:
http://jsfiddle.net/88t4L/
.row-fluid {
columns: 2 8em;
}
Here, the columns must be at least 8em wide, but if there's room for all of them to appear in a row, it will do so.
http://caniuse.com/#search=columns
CSS Flexbox:
http://jsfiddle.net/88t4L/1/
.row-fluid {
display: flex;
flex-flow: row wrap;
}
.row-fluid .span3 {
flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}
http://caniuse.com/#search=flexbox