I have this code:
<div class="row">
<div class="col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
How I can hide first col-lg-3 on mobile and update col-lg-6 to col-lg-9?
I don't need show col-lg-3 on mobile devices. But if I hide on css with media then col-lg-6 is not resize to full width.
It sounds like you want something like this. Use the display utils to show/hide the column. Use col for the col-lg-6 so that it always fills the remaining width.
<div class="container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block">
<div class="ava-block border">
3
</div>
</div>
<div class="col">
<div class="ava-block border">
6-9
</div>
</div>
<div class="col-3">
<div class="ava-block border">
3
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gyuRoUt68s
To hide a div on mobile you have to use the css class .d-none .d-sm-block and to make a div only big on mobile you have to use .col-xs-9
So:
<div class="row">
<div class="d-none d-sm-block col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-xs-9 col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
Check Bootstrap's documentation on display
Related
So there two columns , i wanna fit my image inside my first column so my second column can go down!
enter image description here
my HTML :
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="hero-image container-fluid">
<img class="man-with-laptop img-fluid"
src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="hero-text-area container-fluid">
<p>HELLO!</p>
</div>
</div>
</div>
</div>
Try it like this below and see what happens.... 1 container, 1 row.
Also, it looks like you're adding a lot of your own CSS I can see from your class types. I think your added CSS is messing about with your layout and confusing Bootstrap.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<img class="man-with-laptop img-fluid" src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
<div class="col-lg-6 col-sm-12">
<p>HELLO!</p>
</div>
</div>
</div>
I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;
halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview
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