I am using Bootstrap v3.1.1 to design web app. I hav three divs in the middle div i have a small div and i need to place it vertically aligned.
Here is what i got so far.
<body>
<div class="row fill">
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">
</div>
<div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
<div class="child"></div>
</div>
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">
</div>
</div>
</body>
I couldn't place the child div vertically aligned. I tried following css.
.parent {
display:table;
height:100%;
display:table;table-layout:fixed;
}
.child {
vertical-align:middle;
text-align:center;
border:2px solid gray;
height:40%;
}
Someone please help,
Thanks.
So your problem was you wanted to vertically center-align a child div whose height was 40% but since you had given it as display:table-cell, it behaves like a <td> element and ignores the height.
The solution is to place that child div in another container and apply the display:table-cell and vertical-align:middle to that container:
<div class="row fill">
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">
</div>
<div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
<!-- another container to vertical align the child div -->
<div class="center-child">
<div class="child">test</div>
</div>
</div>
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">
</div>
</div>
DEMO
Related
Bootstrap 4 - Safari Version 10.1.2 display:table; and display:table-cell; vertical-align:center; not working on a 100% height div.
<div class="test-slider">
<div class="slide">
<div class="row no-gutters">
<div class="col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7">
<img src=""/>
</div>
<div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5">
<div style="display:table; height:100%;">
<div style="display:table-cell; vertical-align: middle;">
<h2>Test center</h2>
<p>Should be centered</p>
</div>
</div>
</div>
</div>
</div>
</div>
If I render in chrome the height is inherited from the .test-slider class that has a fixed height whilst in safari it takes the contents height rather than filling the height of the div. Any ideas? I am using slick slider.
Well, currently I have Safari 11.0.1, but if I set the below stlye, it does center the text vertically to me.
.test-slider .row {
height: 500px;
}
Setting the height only to .test-slider is not enough, since the children do not know that they should fill in that height. The 100% height set on the "table" is calculated from the height of it's parent, the .col-md-5 div. Which, in your case does not know about the height of the .test-slider.
Other than that, please note that col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7 is totally equivalent to simply writing col-md-7. The same stands for col-md-5 of course.
Also, instead of using tables, I would recommend to use the flexbox utility classes already available in Bootstrap. That makes the markup lighter. This is an example:
.test-slider .row {
height: 300px;
}
.test {
background-color: lightgray;
}
<div class="test-slider">
<div class="slide">
<div class="row no-gutters">
<div class="col-md-7">
<img src=""/>
</div>
<div class="test col-md-5 d-flex align-items-center">
<div>
<h2 class="mb-0">Test center</h2>
<p class="mb-0">Should be centered</p>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
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>
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.
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 am using Bootstrap and trying to achieve the following with thumbnails.
I the div #demo reaches its max height then make anything after this height overflow horizontally and enable a scrollbar horizontally. I tried overflow-x:auto and other tricks but the div overflows vertically. Any ideas on how to do this?
<div class="row">
<a class="col-md-6 col-xs-12" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
<div id="demo" style="overflow-y: auto; max-height: 430px;">
<a class="col-md-4 col-xs-4" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
.....
</div>
</div>
Have a look here: Create horizontally scrolling List Item view using Bootstrap Columns
And also look this sample: http://jsfiddle.net/V5zWT/10/
<div class="DocumentList">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
</div>
</div>