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/
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 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)
I use this code for big screen and small screen
<div class="col-xs-6 col-lg-2">
<div>A</div>
</div>
<div class="col-xs-12 col-lg-8 ">
<div>B</div>
</div>
<div class="col-xs-6 col-lg-2">
<div>C</div>
</div>
Big screen
|____A___|_______B_______|_____c____|
i want to this small screen
|_________B___________|
|____A____|_____C_____|
Please provide code for small
You can do this using the pull and push responsive helper classes.
As Bootstrap 3 is a mobile first framework always start with the smallest view. The order of your columns in the smallest view should be the order of the columns in the html, so B, A and C. Set the size to .col-xs-12 for B and .col-xs-6 for A and C. Your smallest layout is now perfect.
For the larger layout, I've used md, start with fixing the column sizes, as A, B and C should all occur on a single row they should sum up to 12 columns. As B should be twice the size of A or C this leads to a
.col-md-6 for B and .col-md-3 for both A and C. The size of the columns in the large layout is now correct but column B and A are in the wrong order.
To fix the order you should move column A six columns to the left, so add .col-md-pull-6 to A. Column B needs to start after column A, so move it three columns to the right by adding .col-md-push-3.
.box {
background-color: #f99;
border: 1px solid #c66;
text-align: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3"><div class="box">B</div></div>
<div class="col-xs-6 col-md-3 col-md-pull-6"><div class="box">A</div></div>
<div class="col-xs-6 col-md-3"><div class="box">C</div></div>
</div>
</div>
P.S. This method of creating responsive layouts with different column orders works until you have to push or pull a column to another row. As the push and pull classes set the left or right property of an column that has position: relative this will never make a column wrap to another row. If you need this an option is to duplicate the column and its contents and use classes like visible-xs-block to show them in the proper layout.
It's far from perfect but it does the trick:
http://jsfiddle.net/vqzLL55s/1/
<div class="container">
<div class="col-xs-3">
<div>A</div>
</div>
<div id="divB" class="col-xs-6">
<div>B</div>
</div>
<div class="col-xs-3">
<div>C</div>
</div>
</div>
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.