Menu
Hello i m new to bootstrap and i want to know how to display two images on one line and keep the responsive function.Can you give me an example ?
<div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
713
You have the images enclosed within div tags, which are block elements. You should instead apply the style directly to the images, and do away with the divs, like this: <img style="max-width:20%" src="…"> Save this answer.
First, create the <div> tag as mentioned in the previous example and insert multiple images inside a common <div> tag so that all the images have a separate <div> tag and a class name.
Place the image at the required line inside the <body> tag. Wrap the image element in . float-left class for aligning towards left, . float-right to align towards right.
Approach: Create a div tag to place the images. In the <img> tag, provide the path of the images using the src attribute and an alternative text using the alt attribute. Add CSS properties to display the images in a vertical alignment.
Sure, for BS2:
<div class="row-fluid">
<div class="span6"><img src="yourimage"/></div>
<div class="span6"><img src="yourimage"/></div>
</div>
For BS3:
<div class="row">
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
</div>
EDIT: 01/03/2017 For BS4 (w/ FLEXBOX):
<div class="row">
<div class="col"><img src="yourimage"/></div>
<div class="col"><img src="yourimage"/></div>
</div>
Another solution is to float the images to the left:
<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
