Align 6 images next to each other responsive bootstrap - html

I'm trying to align 6 images in one row with bootstrap but I get only 4 images with a big space between them. I'm not a professional with CSS.
Here is my HTML Code
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.container-best
{
width:70%;
text-align:center;
margin: auto;
}
.best-rate
{
background-color: #ffd564;
text-align: center;
font: 20px 'aleobold', sans-serif;
color: #4c4145;
text-transform: uppercase;
padding-bottom: 25px;
padding-top: 26px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="container-best">
<div class="best-rate">
☆☆☆☆☆☆☆Today Best Choice☆☆☆☆☆☆☆
</div>
</div>
<br />
<div class="row">
<div class="col-md-2 col-md-offset-1">
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
</div>
</div>
<div>
</body>
</html>
I tried to fix many times but I failed, I don't know what is the problem, Please help.
Thanks in advance


first, add CSS class,
.img-responsive{
width: 100%;
}
remove the "col-md-offset-1" in div tag. And add images into the .
<div class="container">
<div class="row">
<div class="col-md-2">
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
</div>
<div class="col-md-2" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
</div>
</div>
</div>


You need to remove col-md-offset-1 from columns and it will fix the problem. Bootstrap has a 12 column layout. You have to many columns in a row: 6*2 (from columns) + 6*1 (from offset) = 18.

Related

How to make same height of all responsive images in a row

The first image of the row doesn't have the same height as the other ones. I am using Bootstrap .img-responsive.
HTML
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-sm-3">
<div id="haber1">
<div id="haberimg1">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg" >
</div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-sm-3">
<div id="haber2">
<div id="haberimg2">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg" >
</div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
/* we deleted the other parts because of mostly code problem */
</div>
<!--HABER BÖLÜMÜ BITIS-->
</div>
</div>
Bootstrap CSS
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
This is the issue:

There are a number of solutions. Here is a couple of similar solutions. First you would need to create a div that scales responsively. This can be achieved with:
.img-wrap {
height:0;
// adjust the padding to change the aspect ratio of the div
padding-bottom:60%;
}
you can then either add a background image to the .image-wrap element with background-size:cover. Or you could place an image inside .image-wrap and then position:absolute; it inside .image-wrap and add object-fit: cover; width: 100%; height: 100%;.

Answer 1:
You have to set a fixed height to the img parent div and then set height:100% to the img Check below Snippet:
.haberImg {
height: 75px;
}
.haberImg img {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>
Answer 2:
You have to set a fixed height to the img parent div as the smallest img height and then add overflow:hidden. Check below Snippet:
.haberImg {
height: 80px;
overflow:hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>

A simple way is to use images that have the same width and the same height! (You avoid a lot of problems and there is no need to fix something with CSS)
HTML
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
</div>

Just give your images same class and add height.
Trick: avoid of giving height with pixels because getting issue in small screen instead give height with rem or
percentage

It's very easy actually, use display grid and grid-auto-columns: 1fr.

How to align an image horizontally center within a div?

I have this below HTML Code:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
I tried this and lot more but couldn't align it to center.

apply style text-align:center to div as:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto;text-align:center">
<img src="~/images/loader.gif"/>
</div>
</div>
</div>

Add only this css to #loadme{text-align:center;}
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; text-align:center">
<img src="~/images/loader.gif" />
</div>
</div>
</div>

Do This ..
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
<img src="~/images/loader.gif" />
</div>
</div>
</div>

The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;
Hope this helps you in future.

In css,
#loadme { display:grid; align-items:center;}
Using CSSGrid

One page site - images overflow on responsive versions

I've put together a one page site but am having problems with the top section.
It's fine on a desktop, but on any other device the three main photographs on the section stack, instead of the section expanding to allow this, the images just overflow (or are hidden if using overflow hidden property).
I'm not sure what the issue is that's causing this and would be grateful for your guidance.
Here's the html:
<!-- Jumbotron -->
<section class="jumbotron" id="header">
<div class="container">
<div class="main-photo" id="header-photo">
</div>
<div class="transparent-box" style="padding-top: 3%;">
<img src="images/logo.png" style="width: 100%;"></img>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1" style="padding-top:5%">
<div class="row">
<div class="col-md-3 col-sm-offset-1">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
</div>
<div class="row">
<a href="#quote-one" style="color: #d5b17c;">
<i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Jumbotron -->
and the css:
/* ==========================================================================
Jumbotron Section
========================================================================== */
.jumbotron {
padding: 100px 0 60px;
margin-top: 0;
margin-bottom: 0;
background: transparent url('../images/black-red-background.jpg') no-repeat top center;
background-size: auto auto;
background-attachment: fixed;
font-size: 1em;
height: auto;
overflow: hidden;
}
.jumbotron .container {
text-align: center;
}

If I understood correctly then the problem is your col-md classes cause breakpoints at the MD size which is tablets lower.
Change <div class="col-md-3 col-sm-offset-1"> to <div class="col-xs-4">
And the other 2 <div class="col-md-3" also to <div class="col-xs-4">
Is that what you want?

How to vertically align divs with different contents?

I have two section on a page. I am not able to vertically align their contents. I am using vertical-align:middle yet unable to do it. I have also tried display:flex but that creates problem in responsive view.
Here is the structure:
<div class="container-fluid" style="display:table;width:100%;">
<div class="row" style="display: table-cell;vertical-align:middle;">
<div class="col-lg-9 section_1">
<div class="logo hidden-xs">
<img src="custom_images/logo.png" />
</div>
<div class="realtor">
<img src="custom_images/realtors-profileimg.png" width="70" height="70" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>+91-972-255-2874</span>
</div>
<div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
<div class="phone_number hidden-xs">080-888-0888</div>
<<div class="powered_by hidden-xs">
<img src="custom_images/powerdby-logo.png" />
</div>
</div>
<div class="col-lg-3 section_2" style="height:70px;">
<!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
<div class="logo">
<img src="custom_images/logo.png" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>+91-972-255-2874</span>
</div>
</div>
</div>
</div>
and the style is here....
.row > div
{
display: table-cell;
vertical-align: middle;
}
.section_1 > div
{
display: inline-block;
}
.section_2 > div
{
display: inline-block;
}
img
{
max-width: 100%;
max-height: 100%;
}
and here is the screen shot of the problem...

You had error in HTML <<div class="powered_by hidden-xs">
Here is fixed version https://jsfiddle.net/kjp91hko/2/
<div class="container-fluid" style="display:table;width:100%;">
<div class="row" style="display: table-cell;vertical-align:middle;">
<div class="col-lg-9 section_1">
<div class="logo hidden-xs">
<img src="custom_images/logo.png" />
</div>
<div class="realtor">
<img src="custom_images/realtors-profileimg.png" width="70" height="70" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>+91-972-255-2874</span>
</div>
<div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
<div class="phone_number hidden-xs">080-888-0888</div>
<div class="powered_by hidden-xs">
<img src="custom_images/powerdby-logo.png" />
</div>
</div>
<div class="col-lg-3 section_2" style="height:70px;">
<!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
<div class="logo">
<img src="custom_images/logo.png" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>+91-972-255-2874</span>
</div>
</div>
</div>
</div>

Vertical align of two md column with Bootstrap

I've searched and tried all Stackoverflow solutions without success.
I've this code and I'm using bootstrap3
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="Images/social/facebook.png" alt="facebook" class="footerimg" />
<img src="Images/social/twitter.png" alt="twitter" class="footerimg" />
<img src="Images/social/youtube.png" alt="youtube" class="footerimg" />
</div>
<div class="col-md-4 col-md-offset-4">
<p class="text-right">© <%: DateTime.Now.Year %> Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p>
</div>
</div>
</div>
</footer>
I would like to vertically center col-md-4 elements and I have footer styles like this:
footer {
background-color: #000;
color: #fff;
height: 120px;
}
I've already tried with table-cell applied to col-md-4 but without success.
Can you suggest a solution?

If you want something like this : (images are not shown)
I made a live example.
This is the code :
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="centered">
<img src="Images/social/facebook.png" alt="facebook" class="footerimg" />
<img src="Images/social/twitter.png" alt="twitter" class="footerimg" />
<img src="Images/social/youtube.png" alt="youtube" class="footerimg" />
</div>
</div>
<div class="col-md-4 col-sm-4 col-sm-offset-4 col-md-offset-4">
<div class="centered">
<p class="text-right">© Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p>
</div>
</div>
</div>
</div>
</footer>
And the CSS
footer {
background-color: #000;
color: #fff;
height: 120px;
display: table;
width: 100%;
}
.centered {
display: table-cell;
vertical-align: middle;
height: 120px;
}
Ref : centering-in-the-unknown