I have a two column layout which I would like to switch order on mobile devices.
When I try col-xs-push-12 it doesn't switch the columns, it merely places the first column out of sight.
Here is the code
<div class="row">
<div class="col-sm-6 col-xs-12 col-xs-push-12">
<h2>Title</h2>
</div>
<div class="col-sm-6 col-xs-12">
Content will go here
</div>
</div>
UPDATE: It appears its being push'd on viewports outside xs too.
A work around would be to take a mobile-first approach and do something like this:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
Content will go here
</div>
<div class="col-sm-6 col-sm-pull-6">
<h2>Title</h2>
</div>
</div>
Related
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
i have a problem with my website: screenshot.
How do I make what I circled be in the middle, parallel with the navbar?
This is my code :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<img src="" alt="">
<div class="caption">
<h4>label</h4>
<p>adadasdasd</p>
add to chart
</div>
</div>
</div>
</div>
</div>
I would recommend using the .col-md-offset-* class. So in your case when it has a width of 4 units, offset it 4 units with col-md-offset-4 so that it will have 4 units on each side and be centered.
First, maybe you can read this:
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
With the grid basic, you know col-12 is the whole width.
If you want to make it in the middle try this:
(This might not be the best code here, but should work).
<div class="col-md-4"></div>
<div class="col-md-4">
<YOUR BOX GO HERE>
</div>
<div class="col-md-4"></div>
Let me know if it was helpful.
Thanks
I have the following markup
<div class="container">
<div class="row">
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
</div>
<div class="row">
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
</div>
</div>
How can i have the content section sit on top of the sidebar for mobile view? for example with the above markup ill get the following in mobile view (stack)
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
siderbar
</div>
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
siderbar
</div>
but i want to achieve the following for mobile view
<div class="col-sm-8>
content
</div>
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
<div class="col-sm-4">
sidebar
</div>
I've seen this done before but just forgot. Thanks everyone
After multiple attempts of just experimenting I found this way.
I decided to remove one whole row and squeeze all the contents in col-sm-8 and all the sidebar content in col-sm-4
<div class="col-sm-8">
content
content
</div>
<div class="col-sm-4">
sidebar
sidebar
</div>
The you are defining the behaviour for your columns to be the same for all displays. If you want them to appear differently, you've got to use them accordingly. The sm part of your css class name tells you how you want to render on that particular size of screen. So you use xs for very small screens, s for small screens, md for medium and so on.
Changing your markup to this should do the trick, I've always found best to play around with it a bit by changing your browser size or with some nifty browser addon. I changed your columns a bit, because it seems to me like you would want your content and sidebar to take the whole width of the screen on a mobile device.
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
content
</div>
<div class="col-md-4 col-sm-12">
sidebar
</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-12">
content
</div>
<div class="col-md-4 col-sm-12">
sidebar
</div>
</div>
</div>
See this codepen snippet for reference: http://codepen.io/anon/pen/VLoMML
You can specify different layouts for each of the bootstrap supported different screen sizes, xs being good for mobile phones, x being good for tablets, md being good for regular sized computer screens and l for large displays. The documentation is really quite comprehensive: http://getbootstrap.com/css/#grid
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>