I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
Related
Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am using Bootstrap 3 and on mobile devices I'd like to vertically stack all the div's (sidebar & content) and position the left sidebar below the main container (currently to the right of the left sidebar) on mobile (xs) devices. The HTML, looks like this
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-push-9"> Sidebar</div>
<div class="col-sm-9 col-xs-pull-3"> Main Container</div>
</div>
The problem with above is that, using col-xs-push-9 on sidebar and col-xs-pull-3 on main container they appear in reverse order on large(lg) medium(md) and (sm) devices. I do not want to reverse the order but only want to have the left sidebar below the main container on extra small mobile devices.
I want a bootstrap solution not a JS / jQuery solution.
Pls help.
Regards,
dk
If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3"> Main Container</div>
<div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
</div>
</div>
http://codeply.com/go/8g4UL0J43K
Bootstrap inherits properties for larger grids from the properties set for smaller grids. Therefore you have to set the pull and push to 0 for grids larger than xs, sm, like this:
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div>
<div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div>
</div>
</div>
In Bootstrap 4 you use ".order-*-{n}"
This example has 3 columns. On a large view they are evenly spaced and in the same order as the HTML. On a medium view, HTML columns 1 and 3 are half width and across from each other while the middle HTML column is dropped to the bottom and full width. On small views they are each full width in HTML column order 1,3,2.
<div class="row">
<div class="col col-sm-12 col-md-6 col-lg-4 order-1"></div>
<div class="col col-sm-12 col-md-12 col-lg-4 order-sm-last order-lg-2"></div>
<div class="col col-sm-12 col-md-6 col-lg-4 order-3"></div>
</div>
I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>
I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}