CODEWITHSUNDEEP
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
Александър А.
Александър А.

Reputation: 93

How to display two images on one line Bootstrap 3

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>

Upvotes: 8

Views: 35131

Answers (2)

Ignacio Correia
Ignacio Correia

Reputation: 3668

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"/>

Upvotes: 17

semirturgay
semirturgay

Reputation: 4201

It should be something like that 

<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>

Upvotes: 2

Related Questions