I have a row with a few columns. I want each div to have a 1px border around it, but wherever two divs touch, there shouldn't be overlapping borders (2px). I want it like a grid, but without using tables as this has to be responsive. In the picture below, I want the first effect, not the second. I've tried borders with border-collapse but it did nothing, even when adding "display:table-cell".
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
<div class="col-xs-6 col-sm-3 col-lg-2"></div>
</div>
</div>
it's probably not the best solution (may be the easiest) but you could just add
div {
margin-top:-1px;
margin-left: -1px;
}
so then the borders overlap and it looks like a 1px border all around
Related
I'm having issues with the following markup. The columns from the last row do not fill up the whole width even though the container is fluid and the sum of their classes is 12.
<div class="container-fluid">
<div class="row" id="header">
<h1>Title</h1>
</div>
<div class="row" id="ndHeader">
<h2>Categories </h2>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3" id="sidebar">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-9">
<div class="clearfix hidden-sm-up"></div>
<div class="row tileRow">
<div class="col-xs-4 col-sm-3 tile">
<div class="tileContent"> asd </div>
</div>
<div class="col-xs-4 col-sm-3 tile">
asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<div class="col-xs-4 col-sm-3 tile">
asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</div>
</div>
</div>
You can see the live example : http://www.bootply.com/GsJbodLFwb#
The columns are using the correct width. In the last row you have two main divs, a col-sm-3 and a col-sm-9. The col-sm-9 is correctly using up 75% of the available space. The div that has the col-sm-3 attached to it has some css overwriting its width. You need to remove the following code to get that back to spanning the full 25% that it should be:
#sidebar {
background-color:green;
//width:15em; <-- remove this
height:100%;
}
Also, the three divs inside of your tile row only add up to 9 at the sm size. You'll want to change those to col-sm-4 or just remove them altogether as the col-xs-4 will do the same thing.
You are setting widths for these 2 cells
<div class="col-xs-6 col-sm-3" id="sidebar">...</div>
<div class="col-xs-6 col-sm-3">...</div>
First one has a width: 15em; and the second one is width: 75%; which is causing that row width to behave oddly. If you need a custom width table i suggest not using the bootstrap rows & cells and just make your own.
<div class="row">
<div class="col-xs-12 col-sm-12">
*my custom table or divs here*
</div>
</div>
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
I'd like to create a 4 column footer that looks nice. The content for the footers varies in width and I would like to have an equal amount of space between each block of text in the columns. The only way I know to do this is to add a class to each div and play with the margins until things look right. I seem to have to add a negative margin to one or more columns so that the spacing is equal between each block of text. I can get things to look good on large screens, but then when you view the page in a smaller screen, divs overlap and things get wonky. I'd like the columns to start stacking on top of each other and filling up the entire width of the screen as much as possible. Here's a jsfiddle and my code that shows what I'm trying to do. What would you add to this to make it look good on desktops and as many mobile devices as possible?
http://jsfiddle.net/natetg/qhtyL7t8/
'<div class="navbar navbar-fixed-bottom footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnContentWithLargeWidth</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnContentShort</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnShort</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>ColumnContentWithLargestWidthAndWantThisAllOnOneLinePlease</p>
</div>
</div>
</div>
</div>`
Try using .container-fluid and .row-fluid instead of container and row.
<div class="navbar navbar-fixed-bottom footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnContentWithLargeWidth</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnContentShort</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>columnShort</p>
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
<p>ColumnContentWithLargestWidthAndWantThisAllOnOneLinePlease</p>
</div>
</div>
</div>
</div>
In bootstrap, I need to keep the proportion of the following columns, yet I need to group 2 columns with a div so that I can modify the background.
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-6"></div>
I am trying to do something like:
<div class="col-xs-6 col-md-3"></div>
<div class="grey">
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-6"></div>
</div>
But it changes the proportion, as it is considering grey div as 18 grid.
col-*-4 will give you 3 columns of equal width (spanning 4 cols each). No need to group them to modify their background color. Just apply the same class with background color defined in your css:
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4 grey">Col 2</div>
<div class="col-xs-4 grey">Col 3</div>
css
.grey{backround:grey;}
Demo: http://www.bootply.com/E78M9vm9Uk
My personal advise will be this. Though I'm really certain of what your goal is. Since bootstrap has an 12 wide grid your col-xs-6 will put 2 columns beside each other and the next one below.
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-3 grey"></div>
<div class="col-xs-6 col-md-6 grey"></div>
If you really looking for grouping I should consider this approach:
<div class="col-xs-6 col-md-3"></div>
<div class="grey col-md-9">
<div class="col-xs-6 col-md-4"></div>
<div class="col-xs-6 col-md-8"></div>
</div>
But that will not correspond when he enters xs. Since it is not clear to me what you want with that size.
Yes folks, it's another vertical-alignment question! I'm trying to do something pretty simple with Bootstrap 3, but hitting a wall on it. I'm building on the answer to this related question, but hitting the problem described below.
Here's the markup:
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
</div>
</div>
</div>
And the CSS:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
img {
max-width:200px;
}
When "float:none;" is included on .vcenter, the images are vertically-aligned as desired. However, the fourth column wraps underneath the other three.
When "float:none;" is commented out, the 4-column layout is achieved, but the images aren't vertically-aligned.
Bootply example so you can see what I mean.
Any idea how to get a four-column layout and vertically-aligned images?
The issue is that display:inline-block takes the white space into account. If you stack the column divs right next to each with no new paragraph spaces it will line up correctly. So it would end up like this:
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
</div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
</div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://2.bp.blogspot.com/-91OnmwoX5t0/T8reMB25ReI/AAAAAAAACQQ/D_jlmi6vWTw/s1600/GREEN+LANTERN+LOGO.png">
</div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vcenter">
<img src="http://ecx.images-amazon.com/images/I/41biZJowGyL._SY300_.jpg">
</div>
</div>
</div>
For more info see:
Stackoverflow: css - two inline-block, width 50% elements don't stack
CSS-Tricks: Fighting the Space Between Inline Block Elements
The float on columns in Bootstrap 3 helps to account for the few pixels too large they are. To fix this you just need to play around with the margin a little:
.vcenter .col-xs-3, .vcenter .col-sm-3, .vcenter .col-md-3, .vcenter .col-lg-3 {
margin: 0px -2px;
}
Hope this helps!