I have a list with width 100%, it has divs with cols. It is in another div with width 100% because it has col-xs-12.
Here is the code.
<div class="col-xs-12 col-sm-12">
<div class="block-gray p20">
<div class="list list-img-odd">
<div class="header">
<div class="row">
<div class="col-xs-1 col-sm-1"></div>
<div class="col-xs-3 col-sm-3">Title</div>
<div class="col-xs-2 col-sm-2">Title</div>
<div class="col-xs-2 col-sm-2">Title</div>
<div class="col-xs-2 col-sm-2">Title</div>
<div class="col-xs-2 col-sm-2">Title</div>
</div>
</div>
<div class="row-list">
<div class="row">
<div class="col-xs-1 col-sm-1">
<div class="image right">image</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="name">info</div>
<div class="col-xs-2 col-sm-2">info</div>
<div class="col-xs-2 col-sm-2">info</div>
<div class="col-xs-2 col-sm-2">info</div>
<div class="col-xs-2 col-sm-2">info</div>
</div>
</div>
</div>
</div>
</div>
</div>
I need to overflow-x it in mobile < 768 because it's a "table" and it doesn't fit. When the container is px like col-sm-12 (width 760px) there's no problem but, with the col-xs-12 (width 100%) the table go outside the screen and breaks the layout :(
If I write, for example, the div list with style width 1300px to make it bigger, and the div block-gray with overflow-x auto, it doesn't listening... Goes away.
EDIT: If the div list has width 120% in < 768, for example, it works but I want to know a better CSS writing.
Related
Consider this case
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3"></div>
<div class="col-md-6 col-sm-6 col-xs-6"></div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
In this case, suppose if I need to fill the first div (first column) within the parent div with a background of #FF0000 how can I do it? If I can do it in a regular way, that is by specifying the style="background-color:red", the background changes only for the content written within it. Not if I create another div inside it and set its height and width to 100% nothing happens. Why is it so? And how can I do it the correct way?
Use a
<div class="col-md-3 col-sm-3 col-xs-3"> </div>
And set the background color as you wish.
Simple and elegant.
Empty div has no height. Use height, min-height, padding-top or padding-bottom to make empty div visible. You may do it
by class for column
by class for row with :first-child
Bootstrap uses col-xs- for screens of any width if there are no other conditions. Therefore col-md-3 col-sm-3 col-xs-3 is equivalent to col-xs-3.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.make-first-div-red > div:first-child,
.make-it-red {
background-color: #f00;
min-height: 30px;
margin-bottom: 10px;
)
<div class="row make-first-div-red">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3 make-it-red"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="bg col-md-3 col-sm-3 col-xs-3">adadadadada</div>
<div class="col-md-6 col-sm-6 col-xs-6"></div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
and use this css
.bg{background:#FF0000}
and it will work
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 doing a website using bootstrap 3.0 which I want the HTML and CSS to be seen neatly on a desktop, tablet and mobile.
A problem that I am having is that when you view the site on a mobile display the column are stacked (in which I am not criticizing as this stops scrolling as much as possible). However, I would like a little gap between the columns (even 1-2px).
The code so far
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns">
..content
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
..content
</div>
</div>
</div>
An image to show what this is doing and to display the stack columns
How could I achieve a little gap between the columns?
Thanks
Add a custom class .column-margin to set the margin between the rows/columns.
#media (max-width: 991px) {
.column-margin {
margin: 2px 0;
}
}
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns column-margin">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Codeply
Give a margin for the col-xs-12 so all blocks will have bottom margin in mobile devices.
#media (max-width: 767px) {
.col-xs-12 {
margin-bottom: 10px;
}
}
To get even spacing and column size I would do the following: (Note: change col-md-* to col-sm-* or col-xs-* as you like )
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</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 was creating a template today using bootstrap. suddenly My grids are not getting any margin between them.
my markup are pretty simple:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
</div>
</div>
I didn't face anything like it before. please help me.
There is no margins between the columns in bootstrap but there is padding. When you set the background-color to white, that creates a background for the padding too which is why it looks continuous and not separated.
Add this:
<div class="col-sm-3">
<div class="white-box">
...
</div>
</div>
With .white-box whatever you want such as background-color: white;
The Bootstrap grid-system does not add any margins - instead it adds a padding inside the columns. You could build something like this:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
</div>
</div>
I also removed your many col-XX-3 classes as stated in my comment. For mor details see Bootstrap documentation
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.