This question already has answers here:
Bootstrap row with columns of different height
(3 answers)
Closed 6 years ago.
How to fix it?
Please look at this picture and tell me what's wrong.
PS: All the image is 400*250, but the green one is 399*250.I think "img-responsive" class will fix it,but it doesn't work.
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\1.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\2.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\3.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\4.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\5.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\6.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\7.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\8.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\9.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
try this, may be this will help you, here i have taken guitar image (400*250) and aeroplane image(399*250) as you mentioned
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width : 980px) {
.img-responsive {
height:250px !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://www.pilotstoresusa.com/resize/Shared/images/jcwings/JC4QBA020.jpg?lr=t&bh=250" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
Related
I am learning the Scss, and I trying to create an Image gallery with SASS.
I am trying to include only one div tag for the whole image gallery as row, I don't want to take a new div for each row.
Does that work, taking only one div as row, and creating rows with styles.
I need suggestions.
`<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
</div>`
With this code, it's displaying all the images in one line.
You can achieve this with flexbox! Flexbox allows you to wrap elements that exceed the width of the parent container. I have included an example of the wrap in action below.
What I did was add "display: flex;" and "flex-wrap: wrap;" to the parent element (.image-gallery-items). This makes it so the child elements will display in rows and then overflow/wrap to the next row automatically if it exceeds the parent width.
.image-gallery-items {
display: flex;
flex-wrap: wrap;
background: #ccc;
width: 600px;
}
.image-gallery-item img {
width: 190px;
height: auto;
padding: 5px;
}
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
<div class="image-gallery-item">
<a href="" class="thumbnail">
<img
src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
</a>
</div>
</div>`
I want to show 5 images in one row.So one row 5 column
for 5 column I find this css
.col-half-offset {
margin-left: 4.166666667%
}
this is work for web but for mobile it does no show correctly although I added responsive attribute to my img element,what is problem with this ?
here is my
css
.col-xs-2 {
/*background:#00f;
color:#FFF;*/
}
.col-half-offset {
margin-left: 4.166666667%
}
and here is my html
<div class="row">
<div class="col-xs-2 ">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 9001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 9001:2015 Kalite Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 14001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" class="img-responsive" alt="Lights">
<div col-xs-12 class="caption">
<p>ISO 14001:2015 Çevre Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 27001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 14001:2013 Bilgi Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/OHSAS 18001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive" style="width:100%;height:100%">
<div col-xs-12 class="caption">
<p>OHSAS 18001:2007 İş Sağlığı Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
How about this:
In Bootstrap 4, For Responsive Image you have to use img-fluid not img-responsive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/ilazycoder/9xuym2kj/6/
How to make a layout on bootstrap4, and then I can not. Thank you in advance!
<div class="col-8">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
Now it goes like this
And need to look like this
Using float: left; styling on the columns will give you this effect.
Below I changed the <img> tag to a <div> with a border to give the same visuals since I don't have img.jpg. If you swap those back in it should still work.
I added the styling to the col classes by just adding:
.col-4, .col-8{
float:left;
}
Though, I would recommend adding a class to the outer div's with this styling instead of pigy-backing on bootstrap's classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
.small-card {
height: 60px;
width: 100%;
border: solid 2px #333;
}
.large-card{
height: 120px;
width: 100%;
border: solid 2px #333;
}
.col-4, .col-8{
float:left;
}
</style>
<div class="col-8">
<a href="#">
<div class="card">
<div class="large-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
</body>
</html>
I am building a webpage using Twitter Bootstrap. I have a .box class where I put my content. The problem is, that on one of the pages where I have 2 boxes, one of them doesn't have the proper width of the container. The first box is wider than the second one and It doesn't look nice. I think that there will be a problem with an unclosed div or something like that, but I wasn't able to figure that out.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MG STAV - Reference</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<link href="css/bootstrap-lightbox.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container text-center">
<img class="img-responsive brand-img" src="img/logo.png" alt="">
</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" id="link" href="index.html">MG STAV stavební, spol. s r.o</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a id="link" href="index.html">Domů</a>
</li>
<li>
<a id="link" href="about.html">O společnosti</a>
</li>
<li>
<a id="link" href="reference.html">Reference</a>
</li>
<li>
<a id="link" href="contact.html">Kontakt</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Naše
<strong>reference</strong>
</h2>
<hr>
</div>
<div class="col-md-5">
<img class="img-responsive img-border-left thumbnail" src="img/banner.jpg" alt="">
</div>
<div class="col-md-7">
<ul class="list-unordered list-reference">
<li>Stavba budovy sociálního zařízení rekreačního areálu Kristýna, Hrádek nad Nisou</li>
<li>Rekonstrukce bytového domu, Horní Počernice</li>
<li>Stavba RD, Stráž pod Ralskem</li>
<li>Stavba RD, Vratislavice nad Nisou</li>
<li>Rekonstrukce RD, Proseč nad Nisou</li>
<li>Rekonstrukce RD, Rychnov u Jablonce nad Nisou</li>
<li>Oprava výrobní haly, Jablonné v Podještědí</li>
<li>Rekontrukce bytového domu, Česká Lípa</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="box">
<div class="row">
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
<div class="tab-content">
<div class="tab-pane odstavec fade in active" id="rekonstrukce">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic11.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="rodinne_domy">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic8.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic11.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic12.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic13.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic14.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="zemni_prace">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic5.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © www.mgstav.cz</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
</body>
</html>
Here is the webpage, so you could look at what it does: http://www.mgstav.cz/reference.html
I noticed that the footer acts differently than on the other subpages too. I think that the container doesn't apply on the whole content, but I don't know why.
Your "row" and "box" classes are reversed in this section of your code:
<div class="box"><!-- should be "row" -->
<div class="row"><!-- should be "box" -->
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
And the padding appearing below your home page footer (which is not applied on your sub pages) is coming from a rule in your 'bootstrap-lightbox.css' file:
body {
padding: 30px 0px; /* applies top and bottom padding of 30px */
overflow-y: auto !important;
}
UPDATE: Padding Issue Fix When Modal Window Opens
The easiest way to fix this issue is to override the inline styles I mentioned in the comments below. Add the following style rule to your 'business-casual.css' file:
body.modal-open,
.modal-open .modal {
padding-right: 0 !important;
}
I am having some problems creating this layout:
1: I want to keep the grid layout no matter the size of images that will be dynamicaly generated.
2: Images should keep their aspect ratio (if possible , crop them),
Demo.
This is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/450x450" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x250" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/1350x500" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
</div>
</body>
</html>
CSS
.thumbnail {
overflow: hidden;
}
Your grid lacks the use of multiple rows. Each row needs exactly 12 columns. I added the missing two rows:
http://jsbin.com/cekojaxu/1/