Creating a frontpage for a takeout restaurant.
The problem i am having is that the last row won't fit inside because of a double height element.
Code
<div class="row">
<a class="col-md-3 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x900">
</a>
<div class="col-md-9">
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
<div class="col-md-8">
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
</div>
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
Screenshot of problem
How can I fit the last 2 elements on the same row as the rest?
http://www.bootply.com/KSRUmHINHw
You need to use nested grid rows with this. So the second column is really made up of two rows.
<div class="container">
<div class="row">
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
</div>
</div>
You need to set the rows differently. Think of the two rows on the left, as one group, and the double height item on the right, as a second group. They are both on the same row.
<div class="col-md-9">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
codepen live example: http://codepen.io/narxx/pen/vGbzvR
Related
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 need three images to be placed in the first row and two images in second row as shown in the below figure.
My code for the above image is as follows,
<div class="row" style="margin-left:15%">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Post Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a PhD Guy</p>
</div>
</div>
<br>
<div class="row" style="margin-left:20%">
<div class="col-xs-6 col-md-3" style="margin-left:20%">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Course taking one</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">Others</p>
</div>
</div>
But when I view it in mobile mode using chrome inspect element it is displayed as below
I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.
How can I get them aligned.
Maybe try this:
https://jsfiddle.net/68kycb4g/
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
<div class="col-xs-6 col-sm-5"></div>
</div>
I am creating an app using bootstrap which house tile like style. I am new to this web designing and I bit struggling to get these tiles arranged. My requirement is, I would like to place 4 tiles inside a carousel such that each slide should contain 4 tiles.
I tried using col-cm-6 to divide the container equally. But tile stays to left aligned.
<div class="container">
<div class="row">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
</div>
Could anyone please tell me what I am missing.
Regards,
Raaj
Usetext-center
DEMO: demo full screen
<div class="container text-center">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
CSS:
.thumbnail {
margin: 0 auto;
}
I'm trying to make this grid work but I'm not sure what's the best approach here. I have this page with several thumbnails and each thumbnail has a title. The problem is that when the title length is very long it pushes the thumbnail and everything get messy like this:
I would like to find a way to keep thumbnails aligned, so if there is a very long title instead of pushing that thumbnail down, it pushes the whole row.
This is the markup I have so far for this block of thumbnails:
<div class="container">
<div class="content row">
<div class="col-lg-12">
<h1>Fresh Goals and More</h1>
<hr>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
</div><!-- content row close -->
</div><!-- container close -->
Any hint on how can I fix this? Thanks in advance.
this is simple you have to have a row for four thumbs
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
the row will keep the height of the longest column with children thumb
http://www.bootply.com/6C7i5iRZhz