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/
Related
I am displaying in one row 6 columns as images in my website and I am using bootstrap 4 for diving colums, If I view the website in mobile means If the screen size(width) decreases I want to display images as 4 or 3 columns per row.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
<div class="row text-center">
<div class="col-sm-2">
<a href="category_details.php?id=Advertising Agencies">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image1</p>
</a>
</div>
<div class="col-sm-2">
<a href="category_details.php?id=Advocate">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image2</p>
</a>
</div>
<div class="col-sm-2">
<a href="category_details.php?id=Agriculture">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image3</p>
</a>
</div>
<div class="col-sm-2">
<a href="category_details.php?id=Architects">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image4</p>
</a>
</div>
<div class="col-sm-2">
<a href="category_details.php?id=Astrologers">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image5</p>
</a>
</div>
<div class="col-sm-2">
<a href="category_details.php?id=Automobiles">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image6</p>
</a>
</div>
</div>
Here I am want to display images 4 or 3 images per row if the screen width decreases but that showing single image per row in mobile view, Please if anyone knows Please suggest me on the correct way.
for small screen you use
<div class="col-4 col-sm-2">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
<div class="row text-center">
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Advertising Agencies">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image1</p>
</a>
</div>
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Advocate">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image2</p>
</a>
</div>
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Agriculture">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image3</p>
</a>
</div>
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Architects">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image4</p>
</a>
</div>
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Astrologers">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image5</p>
</a>
</div>
<div class="col-4 col-sm-2 col-md-2">
<a href="category_details.php?id=Automobiles">
<img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
<p class="text-para">image6</p>
</a>
</div>
</div>
I have tried to set equal height columns for my feature collection. Its everything working good in desktop and mobile ipad screens . But when I check real device the height:100%not working. I have tried 'height:100vh` also.
<div class="feature-category default-padding bg-white">
<div class="full container">
<div class="cartHomeTitle text-center mb-4">
<h3>Featured Collection</h3>
</div>
<div class="row mycolspce">
<div class="col-md-6">
<div class="feature-imgitem d-flex align-self-stretch h-100">
<a class="banner_effect" href="#">
<img src="img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta">
<h4>Men</h4>
<p>New Collection</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta left">
<h4>Shirts</h4>
<p>8 Item</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta left">
<h4>Bags</h4>
<p>8 Item</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta">
<h4>SALE</h4>
<p>FASHION SHOES</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--//container-->
</div>
my webiste url Featured Collection
My ipad this what I am getting as per below image.
Sometimes height and min-height will not work on ipad and safari browsers. You can use display:flex follow flexbox group to align equal column height as below example.
.row.mycolspce div[class^="col-"] {
display: flex;
flex-wrap: wrap;
}
.feature-imgitem img {
object-fit:cover;
}
.feature-imgitem,.banner_effect {
display:flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mycolspce">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
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>
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>
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;
}