I have this script
<div class='col-md-6 col-left'>some text</div>
<div class='col-md-6 col-right'>some more text</div>
So from left site I have col-left and on right side col-right. Now, when I change width of browser to width <=400 col-left jump to top and col-right jump to bottom. Can I somehow change this? I want to have col-right on top of col-left when I have media max-width = 400
Check out column ordering:
<div class="row">
<div class="col-md-6 col-md-push-6">On top on small screens, right column otherwise.</div>
<div class="col-md-6 col-md-pull-6">On bottom on small screens, left column otherwise.</div>
</div>
use this:
#media handheld, only screen and (max-width: 400px) {
.col-right { float:left; }
}
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 have a standard loop for a photo gallery and I am using twitter-bootstrap col-xs-12 col-sm-6 col-md-4 col-lg-3 which gives me a 4 image across on desktop, scaling down to a single photo on mobile.
It all works good.
The one thing that is causing me vexation is that I want the single-across photo, when viewing on mobile devices, to be center aligned on the page, but they are all left aligned.
So here is some basic pseudo of what I am doing:
<div class="container">
<div class="row">
<?php
foreach ($photos AS $photo) {
?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="pathtoimage">
</div>
<?php
}
?>
</div>
</div>
Again, the actual looping part, and the four across down to one across all work perfectly, I am just getting stuck on how to get the mobile view (col-xs-12) to be centered in the middle of the page, not left aligned.
Anybody know what the bootstrap magic to make this happen?
You can center the images with some CSS. I created a fiddle
If you want the images to be centered only add certain breakpoints than you can use media queries to center them at certain breakpoints.
For example, to ccenter the images only on small screens:
#media(max-width: 768px) {
.gallery-image img {
display: block;
margin: 0 auto;
}
}
Use text-center class to center image
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 was able to do the Source Ordering using push and pull method. But what the whole right column comes on top of the left column. What i want to achieve is shown in the attached screenshot. Please guide me if there is a work around where i want the order after a 768px breakpoint
If there is a knonwn height on large-4 , you could use a floatting method and a pseudo element, to push dow the first element in order to leave room for second element.
DEMO:
#media only screen and (max-width: 767px) {
.row:before {
content:'';
float:right;
height:1.2em;
width:0;
margin-left:-0.25em;
}
.large-8 {
clear:right;
float:right;
}
.large-4 {
float:none!important;
}
}
You have the natural flex method if you do not mind leaving aside older browsers: DEMO
#media only screen and (max-width: 767px) {
.row{
display:flex;
flex-direction:column;
}
.large-8 {
order:2;
}
}
Add push/pull classes to reorder the source: http://foundation.zurb.com/docs/components/grid.html? Look under source ordering, in that section there is a good example for what you want to do.
Check the foundation documentation
You should read about source ordering.
Source Ordering
Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.
Example:
<div class="row">
<div class="small-10 small-push-2 columns">10</div>
<div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
<div class="large-9 large-push-3 columns">9</div>
<div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
<div class="large-8 large-push-4 columns">8</div>
<div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
<div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
<div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
<div class="medium-6 medium-push-6 columns">6</div>
<div class="medium-6 medium-pull-6 columns">6, last</div>
</div>
Try it in your code, you will see, that columns with "last" named comes first.
trying to build responsive layout from scratch after hours of not getting it just right with bootstrap. My goal is to have fixed width tiles wrap under each other as the display is resized, but not wrap under a sidebar div if there is still enough width in a div to the right of the sidebar to show them.
With the following bare example, I expect the tiles to wrap under each other and under the "filters and search" div, but not under the "content" div on the far left until the width of the display is very narrow. As the width starts to decrease, everything to the right of the sidebar div appears below it, even though there is plenty of space on the right to start stacking. Any suggestions?
Here is the code (no stylesheets to show everything here:)
<div style="border:1px solid red;width:200px;float:left;" id="sidebar">
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
<div>content5</div>
<div>content6</div>
</div>
<div style="border:1px yellow solid;float:left;" id="contentarea">
<div style="border:1px solid;float:left;">filters and search</div>
<div style="border:1px solid;clear:left;">
<div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 1</div>
<div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 2</div>
<div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 3</div>
</div>
</div>
try using css for screen size example:
# media only screen and (min-width: 1550px) {}
# media only screen and (max-width: 1449px) {}