I try to understand how is working bootstrap twitter. Could you told me what's the best way to set another color on TEXT2 only when grid system is on "col-xs-*" ?
<div class="row">
<div class="col-xs-3 col-md-4">
<span>TEXT1</span>
</div>
<div class="col-xs-9 col-md-8">
<span>TEXT2</span>
</div>
</div>
http://jsfiddle.net/wVX65/
PS: sorry for my english...
.col-xs applies to screens < 768px. To apply the colour of text2 when the screen is < 768px. you could make use of media queries in your css. For example -
#media all and (max-width: 768px){
/* Change text colour */
}
JSFiddle
it's not possible to make something like this (with a plugin or anything else) ?
.col-xs{color:red}
Related
I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:
Screenshot
But what I want is
The code to generate the grid looks like this:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
I'm using Vue.js for this template.
So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.
Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.
Thanks for your help! :)
You need to add something every 2 col-md-6 to ensure the left floats clear..
One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..
#media (min-width: 768px) {
.row > .col-md-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/oAiZNlWgau
There are a few ways to achieve this.
Wrap each row into it's own row
<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>
You can also set a min-height for each item, that way they will always be the same height.
Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.
Hope this helps :P
I have this div:
<div class="col-lg-6 col-md-6 col-sm-6">
<p class="btn-toolbar pull-right">Some Content</p>
</div>
I want to know if its possible when the page is in tablet mode (e.g. col-md-6) I want to change the paragraph class instead of pull-right I want to set to pull-left.
Is it possible?
Yes, you will want to use media queries in your css to set the rules differently. If you want the same effect for col-lg-6 you only need to define it in the media query for col-md-6
Keep in mind you only need to define col-sm-6 in your HTML, because it is mobile first the larger sizes will follow suit. You only need to specify the larger values when you want it to change
Yes, but the only way I can see you doing it without messing with media queries is by basically copying all your HTML and applying different classes to each "set" of code you have.
For the HTML that is to appear on a phone, you may want
<div class="col-lg-6 col-md-6 col-sm-6 visible-xs">
<p class="btn-toolbar pull-right">
Some Content
</p>
</div>
For tablets?
<div class="col-lg-6 col-md-6 col-sm-6 visible-md">
<p class="btn-toolbar pull-left">
Some Content
</p>
</div>
Probably not super-efficient but this way you'd be able to have absolute control over every detail of any "version" of your site loaded on a given device.
You could override the pull-right on tablet or above screen sizes, surely?
This avoids splitting the content across two divs as previously stated. I agree, the code splitting nullifies Bootstrap's use, and adds redundant code that could become pretty unmanageable as the content scaled over time.
#media all and (min-width: 768px) and (max-width: 1200px) {
p.btn-toolbar.pull-right {
float: left !important;
}
}
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
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/
Quick question involving foundation. If I want divs to go in order 1 then 2 on desktop and 2 then 1 on mobile, how would I accomplish this using Zurb?
<div class="row">
<div class="three columns">
</div>
<div class="nine columns">
</div>
</div>
Thanks so much for the help!
This can definitely be done. In your code you should order the div's based on how you would display it on the mobile, i.e. 2 then 1. For displaying it properly on larger screens you can override the default styling of the div's.
For testing purposes you can try:
<div class="row">
<div class="nine columns" style="float:right;">
</div>
<div class="three columns" style="float:left;">
</div>
</div>
While the above solution will work, I suggest not using inline styling. I would rather override using custom classes and/or #media tags.
Using those the code would be:
For the HTML:
<div class="row">
<div class="nine columns pull-right">
</div>
<div class="three columns pull-left">
</div>
</div>
For the CSS/Stylesheet:
#media only screen and (min-width: 768px) {
.pull-left {float: left !important;}
.pull-right {float: right !important;}
}
Not sure you can do this strictly with css, but with javascript you can add the pull-x classes when applicable.
theory:
Place the columns in the order you want for the mobile device, or small screens rather. Then in document.ready, check whether show-for-small is visibile or not, if not, you are on a larger screen and can apply push|pull classes to your columns of choice.
pseudo code, assuming you know push/pull technique:
// do this if not on small screen
if ( $('.show-on-small').css('display') == 'none' ) {
// pull or push the columns as needed
$('.myColumnsToPull-two').addClass('pull-two');
} else {
// might be a good idea to revert above change
}