4 columns in a row using Twitter Bootstrap - html

I am trying to get 4 columns in a row.
Code:
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>
But i only get 3 columns, the last image jumps into to next row. Can somebody point me into the right direction ?
Thanks


Just apply the col-sm-3, col-md-3 class on columns instead of col-sm-4, col-md-4.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner2_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner2.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
</div>
</div>
</div>


Replace col-sm-4 and col-md-4 with col-sm-3 and col-md-3. Twitter Bootstrap is a 12 column grid system and hence 4+4+4+4= 16 will push the last column to next row.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>


Try this
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>


The Bootstrap grid is split up into 12 columns. Divide 12 by the number of columns you want, and you will get the number for that class.
For example, 12 divided by 4, is 3. So your classes should be col-sm-3 and col-md-3.
https://getbootstrap.com/examples/grid/

Related

How to increase height of first row image in bootstrap

I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?

Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images

You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>

How can I align Bootstrap Columns vertically so that they are the same height?

I am trying to create a website with several images and content in columns using Bootstrap as a framework.
Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
In the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.
How can I make them adjust to the height of the row so that all of the content is in line?
Thanks.

You may use css flexbox to achieve same height for all the columns. So your code would be:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
and write a custom css
.heightadjust {
display: flex;
}

Bootstrap CSS Grid Customize

I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:
https://codepen.io/ashwindkini/pen/qabRok
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
How do I prevent the second set of images (thumbnails) from increasing the size of row?

Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?
It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.
Everything can go in a single row..
<div class="container">
<div class="row">
<div class="img col-sm-6 col-md-6">
<img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/EEE" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/444" class="img-responsive" >
</div>
</div>
</div>
http://www.codeply.com/go/y9nZTlXSWT

The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.
Here's the example:
https://codepen.io/anon/pen/dpGvOJ
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>

Twitter Bootstrap with tiles centered

I am creating an app using bootstrap which house tile like style. I am new to this web designing and I bit struggling to get these tiles arranged. My requirement is, I would like to place 4 tiles inside a carousel such that each slide should contain 4 tiles.
I tried using col-cm-6 to divide the container equally. But tile stays to left aligned.
<div class="container">
<div class="row">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
</div>
Could anyone please tell me what I am missing.
Regards,
Raaj

Usetext-center
DEMO: demo full screen
<div class="container text-center">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
CSS:
.thumbnail {
margin: 0 auto;
}

Twitter Bootstrap Thumbnail. Make Caption Inline

Look At This Fiddle
The Code:
<div class="col-md-12">
<fieldset>
<legend>Aplikasi Intranet</legend>
<div class="row">
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail</b>
</center>
</a>
</div>
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail Bla Bla Bla</b>
</center>
</a>
</div>
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail Mail Bla Bla Bla</b>
</center>
</a>
</div>
</div>
</fieldset>
</div>
With various image height, How to make the caption stay on the same line? (The Spacing responsively refer to highest image)
Expected Layout:

You could wrap your img in a container, and set a height on this container :
<a style="margin-bottom:0;">
<center>
<div class="img_container">
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
</div>
<b>Mail</b>
</center>
</a>
.img_container {
height: 56px;
}
Updated fiddle
EDIT :
To get an alignment with dynamic height, you may rearrange your HTML structure :
<div class="row">
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail</b>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail Bla Bla Bla</b>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail Mail Bla Bla Bla</b>
</center></a>
</div>
</div>
JSFiddle