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>
Related
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Currently my grid image were aligned like this
But my goal is to make the grid image like this, notice the "img 1" were aligned on the center. How to achieve this?
HTML
<div class="container">
<div class="row imagetiles">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
</div>
</div>
</div>
CSS
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 0px;
}
jsfiddle can be view here
Here is the Bootstrap 4 way to do so.
You can just add d-flex align-items-center class to the row:
<div class="container">
<div class="row imagetiles d-flex align-items-center">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
</div>
</div>
</div>
Also, you used an incorrect version of Bootstrap 4 in your initial JSFiddle. Updated to the latest version at this moment. Also, the jQuery version used is also incorrect (you should notice an error in Developer Console).
To set a particular DIV to have zero padding, you can use Bootstrap layout help class p-0; you don't need to set it specifically in CSS.
Last, img-responsive is for Bootstrap 3, img-fluid is for Bootstrap 4. Don't mix them up.
JSFiddle: https://jsfiddle.net/shivanraptor/bq8covg5/7/
Change your CSS to:
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 0px;
align-self: center;
}
div.imagetiles{
display: flex;
}
here's the jsfiddle
Simply add this to your CSS:
.imagetiles {
align-items: center;
display: flex;
}
jsfiddle here: https://jsfiddle.net/7snfxL4d/
You can use different approaches but the flex one is really easy like this :
.imagetiles{
display: inline-flex;
align-items: baseline;
}
Try to add class my-auto to your img tag
If 1st dont work try to make the whole row a flex-wrap with classes d-flex align-content-center flex-wrap
You can find more here.
I have the following grid - http://codepen.io/vmpen/pen/GqrXQz where aspect ratios must be preserved, whilst being responsive. With no padding
the grid behaves correctly.
<div class="container">
<div class="row-fluid">
<div class="col-xs-3 grid-sizer"></div>
<div class="text-center feature feature--full col-xs-12">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/1080x270"></div>
</div>
<div class="text-center feature feature--width2 col-md-6 col-sm-12">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/540x540"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/270x540"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-6 feature feature--width2">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/540x270"></div>
</div>
<div class="col-md-9 feature feature--width3 feature--width3">
<div class="img-wrapper last"><img class="img-responsive" src="https://placehold.it/810x270"></div>
</div>
</div>
</div>
When items are padded the height of images do not compensate for the padding, making the grid misaligned.
I have managed to fix this with setting a fixed height but that breaks the responsiveness of the grid and aspect ratios. Can someone point me to some well established techniques to solve this problem. As a final point I have tried various masonry solutions to no avail. My problem is quite similar to this - https://github.com/metafizzy/isotope/issues/877
I came across this answer - How to use border with Bootstrap
outline: #fff solid 10px;
It provides the same affect for borders around the image but isn't calculated by the browser when rendering containers.
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 trying to wrap the last content using border, but when I resize the window border wraps above content too?
<div class="row">
<div class=" col-xs-6 col-sm-3 ">
<img src="image/1.png" class="img-responsive center-block" >
</div>
<div class=" col-xs-6 col-sm-3 ">
<img src="image/2.png" class="img-responsive center-block" >
</div>
<div class=" col-sm-6 clearfix" id="t">
<div class="col-xs-7 ">
<h3>hello</h3>
Add
</div>
<div class="col-xs-5 ">
<img src="image/t.png" class="img-responsive pull-right">
</div>
</div>
</div>
I am using following css
#t{
border: 5px solid rgb(232,226,226);
}
I presume you mean at small screen sizes, it's not behaving as you'd like. The problem is you're not telling bootstrap how to treat that div when the screen is below 768 pixels. Try this:
<div class=" col-xs-12 col-sm-6 clearfix" id="t">
Note I've just added the .col-xs-12 class. Works for me in a quick test.
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>