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)
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 have a grid layout for md+ displays which looks like (they are all in one row div):
A(col-md-8) | B(col-md-4)
C(col-md-8) | D(col-md-4)
For small and extra small displays I'd like to have:
B(col-sm-6) | D(col-sm-6)
A(col-sm-12)
C(col-sm-12)
Is it possible to do something like this with bootstrap grid system?
You can use nesting along with push pull like this..
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 col-xs-12">
<div class="row">
<div class="col-xs-6 col-md-12"> B </div>
<div class="col-xs-6 col-md-12"> D </div>
</div>
</div>
<div class="col-md-8 col-md-pull-4 col-xs-12">
<div class="row">
<div class="col-xs-12"> A </div>
<div class="col-xs-12"> C </div>
</div>
</div>
</div>
</div>
Demo: http://bootply.com/BS5Vuz0XEt
You can do it with a little be of redundant code.
<div class="row"">
<div class="hidden-xs hidden-sm col-md-8">COL A (MD and LG only)</div>
<div class="col-xs-6 col-md-4">COL B</div>
<div class="hidden-md hidden-lg col-xs-12">COL A (XS and SM only)</div>
<div class="col-xs-12 col-md-8">COL C</div>
<div class="col-cs-6 col-md-4">COL D</div>
</div>
You can get the B/D ordering the way you want without anything tricky, but that gets you:
A
B D
C
In order to get A where you like on XS/SM devices, you need to have that column twice and mark it hidden for certain sizes. Also note that I am only using -XS and -MD for the column widths. XS covers SM when no separate SM is specified, just like MD covers LG as well. The responsive utilities hidden-xx and visible-xx, however, need to be specified for each size.
Hope that helps. I know it isn't optimal.
Grid Classes
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for laptops)
lg (for desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Grid System Rules
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4.
Examples
Stacked-to-horizontal
Small devices
Medium devices
Large devices
(Source)
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.
i'be trying to make this work over an hour with no success...
In my Desktop version I have 3 columns like so:
A,C: col-lg-3
B: col-lg-6
[A][B][C]
and I want them to show like this on mobile devices
A,C: col-sm-6
B : col-sm-12
[A][C]
[ B ]
I' was trying with pull-left col-sm-pull-x and col-sm-push-x but my problem was that the columns remained on the same vertical position something like this
[A]
[ B ]
[C] -> col-sm-pull-6
to achiece this, we look at the order you want the divs to appear on mobile since this is a mobile first frame work. your end result shows us that the markup should be div#a, then div#c, then div#b. from there we assign all the classes for the sizes at xs, sm, md. now we will use push and pull to re order them at the md screen width and larger.
start by creating on xs and sm
[A][C]
[ B ]
now on md we have
[A][C][ B ]
we need to pull B back 3 columns and push C over 6 columns at md and larger. see the below markup and fiddle
<div class="container">
<div class="row">
<div id="a" class="col-md-3 col-sm-6 col-xs-6">COL A</div>
<div id="c" class="col-md-3 col-sm-6 col-xs-6 col-md-push-6">COL C</div>
<div id="b" class="col-md-6 col-sm-12 cold-xs-12 col-md-pull-3">COL B</div>
</div>
</div>
the ids are not needed. see the fiddle - http://jsfiddle.net/52VtD/6933/
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/