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>
Related
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>
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 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 have the following emmet line:
.lightbox-5-row*8>a[href="#"][rel="lightbox[a]"]*5>img[src="file_$$.jpg"]
Which produces the following structure 8 times:
<div class="lightbox-5-row">
<img src="file_01.jpg" alt="">
<img src="file_02.jpg" alt="">
<img src="file_03.jpg" alt="">
<img src="file_04.jpg" alt="">
<img src="file_05.jpg" alt="">
</div>
What I would like to do is to be able to increment the numbers of the files in the sibling .lightbox-5-row elements like below:
<div class="lightbox-5-row">
<img src="file_01.jpg" alt="">
<img src="file_02.jpg" alt="">
<img src="file_03.jpg" alt="">
<img src="file_04.jpg" alt="">
<img src="file_05.jpg" alt="">
</div>
<div class="lightbox-5-row">
<img src="file_06.jpg" alt="">
<img src="file_07.jpg" alt="">
<img src="file_08.jpg" alt="">
<img src="file_09.jpg" alt="">
<img src="file_10.jpg" alt="">
</div>
<div class="lightbox-5-row">
<img src="file_11.jpg" alt="">
<img src="file_12.jpg" alt="">
<img src="file_13.jpg" alt="">
<img src="file_14.jpg" alt="">
<img src="file_15.jpg" alt="">
</div>
and so on... Is there a way to achieve this?
No, it’s not possible with current Emmet syntax