As Far as my understanding Bootstrap 3 classifying all landscape view ports from 13" Laptops to 24" big screens as col-lg-x . This is starting from 1280x800(13" Notebook) to 1920x1200 (24" Desktops). Now my problem is in order having two column like this
<div class="container">
<div class="row">
<div class="col-lg-4" id="leftBox"></div>
<div class="col-lg-8" id="rightBox"></div>
</div>
</div>
From 19" to bigger size this layout looks perfect but on smaller size specifically on 13" the lefBox appears very small and the entire content are un-readable!. I tried to use the col-md-x classes but apparently those affect on Tablets screens
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6" id="leftBox"></div>
<div class="col-lg-8 col-md-6" id="rightBox"></div>
</div>
</div>
now can you please let me know how I can come over to this issue by having diffrent column on small screen laptops?! which is between col-md and col-lg
You have the code right, but have their order wrong. In order to use the code in smaller screens you should use it like this:
<div class="col-md-6 col-lg-4">
and not the other way around. First use the class of the smaller screen.
Related
I Am Little Bit Confused In Using The Grid system of Bootstrap. Here I wanted to make 6 divs or containters that use full width in smaller devices like mobiles and they use 25% of the width or i get 4 divs in medium devices like tablets and in the large devices i get 6 divs (in desktop screen)
But here i am facing some issues . Can You help me out!
i have got all 6 of my divs using full width in large and medium devices which is incorrect i want 6 of them to be displayed in a single row in large device and 4 of them to be displayed in medium devices
You can do this by first specifying the "col" and then your responsive "cols"
like this:
<div class="row">
<div class="col-12 col-md-3 col-lg-2">Test</div>
<div class="col-12 col-md-3 col-lg-2">Test</div>
<div class="col-12 col-md-3 col-lg-2">Test</div>
<div class="col-12 col-md-3 col-lg-2">Test</div>
<div class="col-12 col-md-3 col-lg-2">Test</div>
<div class="col-12 col-md-3 col-lg-2">Test</div>
</div>
I think this will solve your problem (not tested it)
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 have the following html:
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8">
...
</div>
</div>
The problem is that I get a 1 column offset even when the view port is larger than 768px (the xs size). Any ideas why am I getting this offset?
Because that's what you told it to do. As the Bootstrap docs say:
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices.
So you can override your xs offset with a sm one:
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-0">
I've got a two column page:
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
On desktop and tablet screens, the first div appears to the left of the second div, as we would expect. On smaller screens, the first div appears on-top of the second div, again, as we would expect. What I'm wondering is.... Is it possible, on smaller screens, to flip the order of these two so that the second div appears on top of the first?
Sure! This is built into Bootstrap version 3, with classes like col-[size]-push-[cols], as in the column ordering section of Bootstrap's documentation
Demonstration in this fiddle, using the below code based on Bootstrap's example.
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
<div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
</div>
</div>
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/