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;
}
}
Related
I am new to bootstrap and I very much confused with this basic situation and I feel like I couldn't move forward without understanding the grid system.
Question 1: How would I know the equivalent class prefix of a certain device to another device.Example: col-md-6 what is its equivalent if i wanna show it to smaller devices, what will be the col-sm-X or col-xs-X? I am really confused with griding system.
Question 2: I came across with a bootstrap tutorials. And I am confuse why did he place col-sm-10 in the stores-banners in which it only takes 6 colums in 960 grid, why isn't it col-sm-6 instead? please see image attached.
In following image I'm referring to the buttons area
<div class="container top-description-app">
<div class="row">
<div class="col-sm-6 top-description-text">
<h1>Hello</h1>
<h3>We take mobile photography to a brand new level.</h3>
<p>With our free app you can take amazing photos straigh your phone.</p>
<div class="col-sm-10 stores-banners">
Get the free app
</br>
<img src="img/apple-banner.png" alt="App Store">
<img src="img/google-banner.png" alt="Google Store">
</div>
</div>
<div class="col-sm-6 top-iphone-wrapper">
<img src="img/iphone-header.png" alt="iPhone app">
</div>
</div>
</div>
Hope you can help me guyx. Thanks in advance.
It depends on how you want your website to look like on different screen sizes.
Basically, xs - mobile, sm - tablets, md - desktops, lg - large desktops.
Example:
p {
height: 200px;
margin-bottom: 20px;
background: #ccc;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-12"><p></p></div>
<div class="col-sm-6 col-md-12"><p></p></div>
</div>
</div>
This code means you will have: 1 columns on mobiles (xs), 2 columns on tabletes (sm) and 1 column on desktops (md) and large desktops (lg).
This code you provided isn't really correct. If you nest col- classes inside another col- class you should create another row.
<div class="container top-description-app">
<div class="row">
<div class="col-sm-6 top-description-text">
<h1>Hello</h1>
<h3>We take mobile photography to a brand new level.</h3>
<p>With our free app you can take amazing photos straigh your phone.</p>
<div class="row">
<div class="col-sm-10 stores-banners">
Get the free app
</br>
<img src="img/apple-banner.png" alt="App Store">
<img src="img/google-banner.png" alt="Google Store">
</div>
</div>
</div>
<div class="col-sm-6 top-iphone-wrapper">
<img src="img/iphone-header.png" alt="iPhone app">
</div>
</div>
</div>
And this code means that you will have col-sm-10 inside this col-sm-6 class (so 10 of 12 columns occupies this col-sm-6 column).
Example:
p {
display: block;
margin-bottom: 20px;
background: #ccc;
height: 150px;
}
span {
background: #333;
color: #fff;
display: block;
height: 100px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Column</p>
<div class="row">
<div class="col-sm-6">
<span>Column in another column</span>
</div>
<div class="col-sm-6">
<span>Column in another column</span>
</div>
</div>
</div>
<div class="col-sm-6">
<p>Column</p>
</div>
</div>
</div>
col-md-6 what is its equivalent
there's no equivalent, I mean you shouldn't look at it like that, each bootstrap grid divides your screen into 12 equal columns. we have 4 screen sizes in bootstrap called lg or large, md or medium, sm or small and xs or extra-small. your column definition should be based on what you wanna show to the user at that screen size.
Take a look at this example to better understand the concept. try resizing the screen to see the columns in action.
And for your second question, let me explain it with an example:
Imagine you have a screen with the width 1200px and you wanna have a column with the width 500px how do you do that using the bootstrap grid system? you need to bring your box (screen) size to 1000px and divide it in two. how do you do that?
<div class="col-lg-10">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
it is that simple :)
Bootstrap uses a 12 by 12 grid system, and you have grids within grids.
In your example above, the screen is split with two col-sm-6, on all devices with a screen width larger than the sm breakpoint (which defaults to around 768px, but is customizable), and to stack on devices smaller than the sm breakpoint.
You also asked about the col-sm-10 element, which is INSIDE the col-sm-6 element, which makes a container that is 10/12th the width of half the screen (or half the col-sm-6 that is its parent).
I would have wrapped that col-sm-10 in a <div class="row">, and added an empty <div class="col-sm-2"></div> to finish out the row. That would say for screens smaller than sm, take up the whole space, and screens larger than sm, take up 10/12ths of the space available (which in this case is half the screen, because of the element it is nested in).
If you wanted to always make sure those buttons were never quite as wide as the text above: if you wanted the right edge of the buttons to be set in, you might make the col-sm-10 and col-sm-2 like col-xs-10, which says NEVER stack these divs, regardless of screen size.
I started to write a mobile version in css and I am asking you which is the better way:
In the html to write a div which has a class desktop and another div which has a class mobile. And build everthing from zero. For instance:
<div class="container-fluid bg-1 desktop1">
<div class="container">
<div class="col-xs-5 despre-noi-text first-section">
<h2>asdfsdfdf</h2>
<p class="despre-paragraph">
adsdadd
</p>
</div>
<div class="col-xs-7 despre-noi-img second-section"></div>
</div>
</div>
<div class="container-fluid mobile1">
<div class="container">
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-img"></div>
</div>
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-text">
<h2>asdfsdffdfsfsdf</h2>
<p class="mobile1-despre-paragraph">
asdfdfdfd
</p>
<p class="mobile1-despre-paragraph2">saddfsdfsdfsdfd</p>
</div>
</div>
</div>
</div>
And after that I will check with media queries on the mobile resolution which classes will be hidden and which will be not hidden.
#media only screen and (max-width : 480px) {
.desktop1 { display:none; }
.mobile1 { display:block; }
}
OR to overwrite all of the classes in media queries ?
Definitely use media queries to override the default properties. It's generally a good principle to keep your code DRY and easily maintainable. Having two versions of a block of HTML means unnecessary duplication (meaning more code needs to be loaded to the browser) and more work in future maintenance.
It's not a performance issue to use the queries to override the styles -- CSS is built to cascade. Don't feel bad about taking advantage of it (unless you're cascading with little reason and adding unnecessary specification).
Short answer: Save yourself the stress. Don't duplicate the HTML.
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 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}
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
}