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;
}
Related
I have 6 photos and on md size I would like to have a slider to show them all, on lg they are all displayed side by side and on sm they are displayed 1 per row so there is no problem. Basically I am saying that I don't want to have 2 rows on md but 1 with a slider.
Here is how it looks now
but I would like to make it look like this
the blue line is supposed to be a slider that slides right to reveal more photos.
This is the code I am using now
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
</a>
</div>
</div>
Is it possible to do? What do i have to learn to do it? Any links would be appreciated.
You may use the media query to set the flex-wrap and overflow for the respective screen width. I have set the minimum width as 768px and max-width as 991.98px. You may change it accordingly. Please run the code snippet for the output.
#media (min-width: 768px) and (max-width: 991.98px) {
.row {
flex-wrap: nowrap !important;
overflow: auto !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
</div>
You can dynamically create a corousel item (slide) for each of 4 card by using js and use corousel of bootstrap 4 to show sliding row.
Corousel
Instead of putting up a slider to move around the images, we can actually create a carousel effect with bootstrap. It will provide a breath-taking experience to the users. Here's the code for it.
PS: Edit the class and ID names as per your requirements.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</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>
I am trying to open each div under their respective parent div, but my code opens up each div under the first image, where no one can see. I feel i am using position wrong?
.collapse {
position: relative;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="container">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</section>
just put the collapsable divs inside the col-md-4 divs
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="">
<div class="container">
<div class="row">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/arch" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/nature" class="img-responsive">
</div>
</a>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird">
<div class="col-md-4 clickable">
<img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive">
</div>
</a>
<div class="col-md-4">
<img src="" class="img-responsive">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/nature/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/animals/grayscale" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="" alt="" class="img-responsive">
<div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird">
<div class="row">
<div class="container">
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any/sepia" alt="">
</div>
<div class="col-sm-2">
<img src="https://placeimg.com/20/20/any" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
</div>
</section>
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>
Please take look at my portfolio site
the toggle hamburger button for navigation for smaller screen sizes doesn't work i.e nothing happens and the links don't show up when I click on it.
the images and boxes for the portfolio apps showcased becomes too small for smaller screen sizes even though I used col-sm-12, dunno why this is happening?
I have noticed that there is a horizontal bar too for small screen sizes, which shouldn't be there. It seems that it's the portfolio heading and the contact me heading causing this. could you tell me how to fix this?
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Faraz Ahmed</a>
</div>
<!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- div collapse ends -->
</div>
<!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i>
<hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive.
Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i>
<hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg">
</a>
<p>This is the random quotes generator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg">
</a>
<p>This is the pomodoro timer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg">
</a>
<p>This is the javascript calculator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg">
</a>
<p>Carousel Experiment with in psd to html site</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg">
</a>
<p>My Portfolio site showcasing projects & experiments</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg">
</a>
<p>Experimenting with overlay and pop-up boxes</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg">
</a>
<p>My Weather app</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg">
</a>
<p>Wikipedia Viewer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg">
</a>
<p>Twitch Tv Streamer</p>
</div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed # 2016</p>
</div>
Problem
you are missing bootstrap.js
Explanation
Boostrap navbar requires JavaScript plugin to work, and you are missing it. You can see in Boostrap Docs
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the
navbar collapses, it will be impossible to expand the navbar and view
the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in
your version of Bootstrap.
Working Snippet
body{
font-size:14px;
}
.container-fluid{
max-width:1200px;
}
.hoverme{
height:400px;
margin-bottom:20px;
overflow :hidden;
max-width:340px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Faraz Ahmed</a>
</div> <!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!-- div collapse ends -->
</div><!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i><hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive. Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i><hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg"></a>
<p> This is the random quotes generator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg"></a>
<p> This is the pomodoro timer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"> <a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg"></a>
<p> This is the javascript calculator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg"></a>
<p>Carousel Experiment with in psd to html site</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg"></a>
<p>My Portfolio site showcasing projects & experiments</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg"></a>
<p>Experimenting with overlay and pop-up boxes</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg"></a>
<p>My Weather app </p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg"></a>
<p>Wikipedia Viewer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg"></a>
<p>Twitch Tv Streamer</p></div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed # 2016</p>
</div