Geek Answers Handbook

How to display two images on the same line Bootstrap 3

Hi, I am new to bootstrap and I want to know how to display two images on one line and keep responsive function. Can you give an example?

<div class="col-xs-12 col-md-8"> <img src="images/l.jpg" class="img-responsive" alt="Logo"> </div>
+7
html css image twitter-bootstrap twitter-bootstrap-3
source share
2 answers

Of course, 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: 03/01/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 put the images to the left:

 <img class="pull-left" src="yourimage"/> <img class="pull-left" src="yourimage"/>
+10
source share

It should be something like this

 <div class="col-xs-12 col-md-8"> <div class="row"> <div class="col-xs-4 col-md-4"> <img src="images/l.jpg" class="img-responsive" alt="Logo"> </div> <div class="col-xs-4 col-md-4"> <img src="images/2.jpg" class="img-responsive" alt="Logo"> </div> <div class="col-xs-4 col-md-4"> <img src="images/2.jpg" class="img-responsive" alt="Logo"> </div> </div> </div>
+2
source share

More articles:


All Articles