I am currently working on building a website. I have designed a basic pricing chart for the site (using bootstrap) The problem I am having, is when I resize my window, the design gets mis-aligned.
Here is the code for the current design so far
<div class="background-pricing container-fluid">
<div class="container">
<div class="row">
<div class="payment-method">We accept: Cash and Checks with payment due on Fridays of each week.</div>
</div>
<!--infants and children -->
<div class="row">
<div class="infants-box col-sm-6 col-md-6 col-lg-6">
<div class="infants">Infants</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="children">Children 2+</div>
</div>
</div>
<div class="row">
<div class="full-time col-sm-6 col-md-6 col-lg-2">Full Time</div>
<div class="prices-left-box col-sm-5 col-md-3 col-lg-5">
<div class="prices-left">$200 Per Week</div>
</div>
<div class="prices-right-box col-sm-5 col-md-3 col-lg-5">
<div class="prices-right">$150 Per Week</div>
</div>
</div>
<div class="row">
<div class="full-time col-sm-2 col-md-2 col-lg-2">Up to 4 Hours</div>
<div class="prices-left-box col-sm-5 col-md-5 col-lg-5">
<div class="prices-left">$125 Per Week</div>
</div>
<div class="prices-right-box col-sm-5 col-md-5 col-lg-5">
<div class="prices-right">$100 Per Week</div>
</div>
</div>
</div>
</div>
As you can see, in full screen, the chart is legible, but when resized, the chart is unreadable with the "infants" and "children 2+" side by side.
How would I make it easier to read?
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Working fiddle here.
Related
Is there a way to stack a various number of divs in multiple rows when theres not enough space to show them in a single row?
So what I mean is, imagine you have 20 divs but only 5 fit in the first row. Then there should be 4 rows with 5 items.
On the other hand when we only have 3 items then there should only be one row with 3 items.
Flexbox makes this easy. Have a look here.
The Bootstrap has 12 columns per rows. You can nest columns/rows but not recommend that you nest containers.
With that being said, you can have up to 12 columns per row. To control how it is 'stacked' you classify which type of columns it belongs to. See the demo.
https://codepen.io/pkshreeman/pen/LLYZqm
Resize the window, and you will see what it does for different settings.
Hope this helps.
This is the code used in demo:
<div class="container">
<div class="row">
<div class="col-md-6"> col-md-6 </div>
<div class="col-md-6"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
</div>
</div>
I have been reading a lot of questions and answers here about swapping, rearranging and replacing divs using bootstrap, but I couldn't solve my problem.
I have two divs that contain more divs in it.
One div(A) is on the right side and another on the left(B).
In desktop and tablet view they are set one next to another AB.
When on mobile view I want A to be under B.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
A
</div>
<div class="col-md-6 col-sm-6">
B
</div>
</div>
</div>
I have tried with pull and push but it didn't work.
Any help will be appreciated. Thanks
Here is one solution that did the trick for me:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6 col-push-6">
Content B
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-pull-6">
Content A
</div>
</div>
</div>
SEE WORKING EXAMPLE HERE
Read more on Bootstrap ordering here
You can use a trick by visible class:
<div class="row">
<div class="col-md-6 col-sm-6 visible-lg visible-md">
A (Visible-lg & md)
</div>
<div class="col-md-6 col-sm-6">
B
</div>
<div class="col-md-6 col-sm-6 visible-sm visible-xs">
A (Visible-sm & xs)
</div>
</div>
I am trying to build a mobile-first header. I have a single div class="row" with 4 columns on a single line for viewports of md, lg, but when the viewport drops to sm, xs I push 2 columns to a new row, and at this point the row and/or fluid-container does not resize (grow in height) causing a cut-off that only shows the top two columns.
Is there a way to prevent this, or to tell Bootstrap 3's row or container to grow?
Customer and total are cut off on xs and sm views, the gray area is a new div with the main page's content:
<div class="container-fluid">
<div class="row">
<!-- Sales Order # -->
<div class="col-xs-6 col-md-2 sp-sales-order">
<div ng-controller="tabTitleCtrl">
<div class="sp-header-text">
{{subtitle}}
</div>
<div>
{{title}}
</div>
</div>
</div>
<!-- Button Block -->
<div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
<div ng-include="toolbarPath">
</div>
</div>
<!-- Totals -->
<div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
<div class="row">
<div class="col-sm-12 sp-header-text">
Total
</div>
<div class="col-sm-12">
{{Total | currency}}
</div>
</div>
</div>
<!-- Customer Input Box -->
<div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
<div ng-include="headerPath"></div>
</div>
</div>
</div>
Try this. I built it from scratch to get away from the extra classes in your code so you could clearly see what's going on. I'm basically just relying on Bootstrap to stack the cols for me at different display widths - without overdoing the classes.
I think this is what you're going for.
Here's a Fiddle
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
Invoice
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<button class="btn btn-default">Void</button>
<button class="btn btn-default">Post</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<select class="form-control">
</select>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
Totals
</div>
</div>
</div>
I am trying to keep some Bootstrap columns centered when the columns wrap around when the screen is shrunk.
My code looks like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">WWW</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">XXX</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">YYY</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">ZZZ</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
In the code above the 'Page Title' text stays centered horizontally on the screen as the screen width is reduced which is exactly what I want. I also want the four columns to stay centered horizontally when collapsed down to two columns and then when collapsed down to one column but the code above results in the columns being left aligned in the col-md-8 when wrapped. Is it possible to ensure that however the col-md-2 columns are wrapped they stay centered horizontally?
Your content is being left-aligned within their container divs by the class text-left. If you use the Bootstrap class text-center it will be centered.
Also regarding your column layout, I think you're working against the Bootstrap styles with those inline widths. I'd remove them and try using Bootstrap's own classes, like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">WWW</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">XXX</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">YYY</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">ZZZ</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
</div>
</div>
This will give you full-width columns on each div at the "xs" size (extra small, or mobile), then at the "sm" size (small) they'll grow to be 50%, then at md (medium) they'll shrink to be 1/6th.
Here's a bootply for your reference: http://www.bootply.com/t9XqPsBOpB
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example