So, I can put the 2 images in the same row, but since i wanted to add a subtitle to both images one now stay at the top and the other goes to another line.
Tried pretty much everything now but, I can't align them while i have the subtitle
<div class="container row-info">
<div class="row-fluid ">
<div class="col-sm-4 col-xs-12 text-right">
<figure class="figure">
<img src="imagens/info.png" class="img-fluid img-info">
<figcaption class="figure-caption text-center">Info</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12 text-let">
<figure class="figure">
<img src="imagens/idioma.png" class="img-fluid img-idioma">
<figcaption class="figure-caption text-center">Idioma</figcaption>
</figure>
</div>
</div>
</div>
I don't think your utilizing the col properly. Make sure that all the in a row equals to 12. Eg;
<div class="row">
<div class="col-6"> <img...> </div>
<div class="col-6"> <img...> </div>
</div>
If it's greater than 12, it would spill over below the row.
Related
How set three photos like this:
The photos cover all width only if i set in css width: 100vh for all, but then middle photo is disproportionate (black frames show how i would like it to look like):
When i set middle photo width individually is worst because even i set 100vh width everything is breaking and it looks like this:
Here is HTMl code:
<main>
<div class="container-fluid">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
</div>
I dont know how to it and not to lose responsiveness.
You can use the Setting one column width in the Bootstrap Grid System.
Here's the documentation: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width
This would be the code (Replace the column values with images or background-images):
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
I have some text which is wrapped around an image. Is possible to place the text under the image when on a mobile device without using media queries. (Bootstrap classes only?)
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<!-- image -->
<figure class="figure float-left mr-3">
<img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
<figcaption>
<h4 class="text-center mt-3">Kitten</h4>
</figcaption>
</figure>
<!-- text -->
<p>
Lorem Ipsum ......
</p>
</div>
</div>
</div>
</div>
Here is a fiddle I have created: https://jsfiddle.net/vh7m892z/5/
You can make use of BS utility classes in this instance.
Use float-sm-left on your <figure> element. Adjust as needed.
See the float documentation here.
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<!-- image -->
<figure class="figure float-sm-left mr-3">
<img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
<figcaption>
<h4 class="text-center mt-3">Kitten</h4>
</figcaption>
</figure>
<!-- text -->
<p>
Lorem Ipsum ......
</p>
</div>
</div>
</div>
</div>
Here's your updated Fiddle
Also to get your desired styling just make use of a couple of additional BS classes.
<figure class="figure d-block float-sm-left mx-auto mr-sm-3">
See updated Fiddle with a centred image.
good day, I have a goal of aligning all images and test in my 12 grid bootstrap column. i divided it in 6, 4, and 2 but the icons in the 2 column does not match the length with the other columns. i have images of the current one and the layout that i intended to create.
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
You can add class="img-responsive" class to <img> tag for creating the images responsive. Please see the below updated code:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>
Bootstrap newbie here,
I have a row of 6 images in a single row. Upon resizing the screen I would like them to either move down to 2 rows of 3, or 3 rows of 2 etc based on the size of the screen.
As far as I understand, there is a way to do this with bootstrap?
Here is what I have so far:
A single row class
A loop iterating through all the images stored in a particular folder adding images into a col-md-2 class
Thanks in advance!
You can use col-sm and col-xs as you you col-md-2 to specify a different display based on size.
Example :
<div class="col-md-2 col-xs-6">image</div>
In this example in middle screen your div will take 2 columns and in extra small it will take 6 columns.
Look bootstrap doc to see size corresponding and to get each size available
Try this Markup .....
figure img {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<figure>
<img class="img-responsive" src="http://i.imgur.com/zQIlCOu.jpg" alt="image">
<figcaption>
</figcaption>
</figure>
</div>
</div>
</div>
In my nested column (col-md-6) I included two rows. Unfortunately the (smaller) pictures in the second row do not horizontally align to the left with the first column and the rest of the whole page content. Is there any different margin in col-md-4 than in col-md-12 or is is there any other reason?
Thank you!
<div class="col-md-6 col-md-height">
<div class="row">
<div class="col-md-12">
<a href="images/e1/expose1.jpg" data-lightbox="roadtrip">
<img src="images/e1/expose1.jpg" class="center-block img-responsive" width="100%">
</a>
blabla
</div>
</div>
<div clas="row">
<div class="col-md-4">
<a href="images/e1/s1.jpg" data-lightbox="roadtrip">
<img src="images/e1/s1.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<img src="images/e1/s2.jpg" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="images/e1/s3.jpg" class="img-thumbnail" >
</div>
</div>
</div>
It maybe because of the img-thumbnail class you are using on the last two images.
Try converting them to img-responsive