I have used the following code to align multiple images vertically in bootstrap:
<div class="container border rounded overflow">
<div class="row text-center p-2 flex-nowrap" id="anID">
<img src="../../static/img1.jpg" width=15% alt="">
<img src="../../static/mg2.jpg" width=15% alt="">
...
</div>
</div>
This is the result:
Multiple pictures next to each other in a rounded container:
I want to achieve the same thing but with figures. Using the same code doesn't work. It just makes them appear on top of each other, Like this:
<div class="container border rounded">
<div class="row text-center pt-2 px-2" id="anotherID">
<figure>
<img src="../../static/img2.jpg" width=15% alt="">
<figcaption>a caption</figcaption>
</figure>
<figure>
<img src="../../static/img3.jpg" width=15% alt="">
<figcaption>another caption</figcaption>
</figure>
...
</div>
</div>
Can anyone help me fix this?
Bootstrap has class d-flex that sets child elements next to each other. In other words it make element with class name d-flex a flex container and it's direct child to flex-items.
.d-flex{
display:flex;
}
It has display:flex property in general.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<div class="container border rounded">
<div class="d-flex flex-wrap text-center pt-2 px-2" id="anotherID">
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" class="img-fluid" alt="">
<figcaption>another caption</figcaption>
</figure>
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
<figcaption>another caption</figcaption>
</figure>
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
<figcaption>another caption</figcaption>
</figure>
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" alt="">
<figcaption>another caption</figcaption>
</figure>
</div>
</div>
<h1>Just for your reference I am showing below part how bootstrap works</h1>
<div class="container border rounded">
<div class="row">
<div class="col-sm-3">
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
<figcaption>a caption</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
<figcaption>a caption</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
<figcaption>a caption</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure>
<img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
<figcaption>a caption</figcaption>
</figure>
</div>
</div>
</div>
Please try it with bootstrap
<div class="container border rounded overflow">
<div class="row text-center pt-2 px-2 align-item-center justify-content-start overflow-auto flex-nowrap" id="anotherID">
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
<figure width=15%>
<img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
<figcaption>a caption</figcaption>
</figure>
</div>
</div>
Related
Here is the code of the gridbox, I have currently.
.service-box-container{
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 15px;
}
.service-box-container img{
max-width: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 460px;
border-radius: 20px;
}
<div class="service-box-container">
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
</div>
Design I am looking to acheive:
I want to show only two items on every even row and 3 items on every odd row using grid css. This should be applicable to any additional rows as well.
Currently it is showing same style on both odd and even row. Here, is the https://jsfiddle.net/fk9y0uhd/3
Use grid-row-start and grid-row-end properties same like for column as well grid-col-start and grid-col-end to make this layout. this will help you out
https://www.youtube.com/watch?v=xBSlwwitD5U&t=867s check. OR use 3 column grid for odd one and 6 column grid for evens.
I have the below code in Bootstrap that display an image:
<div class="work">
<img class="anim" src="1.png" alt="Text1">
<img class="anim" src="2.jpeg" alt="Text2">
<img class="anim" src="3.jpeg" alt="Text3">
<img class="anim" src="4.jpeg" alt="Text4">
</div>
The result looks like this:
How can I add some heading/title to each picture in order to describe the purpose of each one?
Try this code with Bootstrap grid system and using h3 to insert title of image
<div class="row">
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="1.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>`
<img class="anim" src="2.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="3.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="4.png" alt="Text1">
</div>
</div>
You can use the figure element for this which Bootstrap has styling for, e.g
<div class="work">
<figure class="figure">
<figcaption class="figure-caption">Image 1</figcaption>
<img class="anim figure-img" src="1.png" alt="Text1">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 2</figcaption>
<img class="anim figure-img" src="2.png" alt="Text2">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 3</figcaption>
<img class="anim figure-img" src="3.png" alt="Text3">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 4</figcaption>
<img class="anim figure-img" src="4.png" alt="Text4">
</figure>
</div>
I have a Bootstrap website that has a div wrapper and then 1 - 6 possible divs in side. These are 200px wide and need to be spaced equally inside.
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>
CSS:
.wasps_home_footer_blocks_container {
width: 100%;
margin: auto;
margin-top: auto;
margin-top: 20px;
}
.wasps_home_footer_block {
width: 200px;
text-align: center;
}
This shows the four divs but left aligned in the .wasps_home_footer_blocks_container div.
The wasps_home_footer_block divs need to be in the middle of the containing div equally spaced apart. (See attached image)
Better to use Flexbox instead of Bootstrap Grid, in this case.
You can remove the commented code to see additional blocks added.
.wasps_home_footer_blocks_container {
display: flex;
width: 100%;
margin: auto;
margin-top: auto;
justify-content: center;
}
.wasps_home_footer_block {
width: 200px;
margin: 20px;
text-align: center;
max-height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block">
<figure>
<img src="http://www.martialartsmoviejunkie.com/wp-content/uploads/2014/08/Drunken-Master.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="https://s3.drafthouse.com/images/made/drunken-master-1_758_426_81_s_c1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<!--UNCOMMENT ME-->
<!-- <div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div> -->
<div class="wasps_home_footer_block">
<figure>
<img src="http://media1.break.com/dnet/media/450/925/2925450/7-martial-arts-movies-you-need-to-see-image-7.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>
This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Closed 5 years ago.
Here is my code sample. in full-width of the browser everything looks fine. But when I resize it, the images (cards) are more towards the left side (not centered).
How can I fix this?
HTML code:
<div class="container-fluid">
<div class="row ">
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
</div>
</div>
Since I'm using Bootstrap v4, it should automatically adjust according to the page. But here is what I experience...
See the image
You can try using a spacer class on the image when on smaller screens mx-sm-auto, for more info on these see here: https://v4-alpha.getbootstrap.com/utilities/spacing/
Apply display: inline-block; to the img tag then apply text-align: center; to the parent;
In your code, you have applied display: block; to the image tag. Where now image act as a blocked element. That's why your image is not aligned in the center.
I have applied text-align: center; for imghvr-fold-up, because I can handle the caption and images in a single point.
Output:
//CSS
.img-thumbnail {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row ">
<div class="col-md-2 text-center">
<figure class="imghvr-fold-up">
<figcaption class="">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up text-center">
<figcaption class="">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up text-center">
<figcaption>
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up text-center">
<figcaption>
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up text-center">
<figcaption>
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up text-center">
<figcaption>
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
</div>
</div>
Demo at codepen.
Add margin:auto and display: block to image to center it
Fiddle
.img-thumbnail{margin:auto;display:block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row ">
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
<div class="col-md-2">
<figure class="imghvr-fold-up">
<figcaption class="text-center">
Hello
</figcaption>
<img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
</figure>
</div>
</div>
</div>
I'm having trouble figuring out mobile view layout problem. When I view my site via mobile, the section shrinks accordingly instead of showing full width image and stacked. How do I fix it so that the boxes sit above each other when viewed via mobile? I am using Bootstrap.
<section class="health" id="health">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title st-center">
<h3>Places to exercise</h3>
</div>
<div class="grid">
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2><span>EAST COAST PARK</span></h2>
<p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
<figure class="portfolio-item">
<img src="images/eastcoastpark.jpg" alt="east coast park"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
It might be that you gave the figure or any other element the picture is nested in a fixed hieght, you can fix in css that with height: auto;
the best way to do this would be to look at adding col-span to each of the images for example, using col-span-4 on three images would allow them to stack nicely against each other in desktop but then in mobile view they would automatically drop under each other due to the default css
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/1.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/2.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/3.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="assets/img/gallery/4.jpg" alt="">
</a>
</div>