CODEWITHSUNDEEP
htmlimage
Rachael Tanis
Rachael Tanis

Reputation: 43

how to put pictures in a row bootstrap

I'm trying to get these 3 pictures in a row with no or little spaces in between, but this code is causing them to stack on top of each other. I also want them to be aligned to the center of the page.

<div class="container">
  <div class="row col-xs-2">
  <img style= "width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt">
</div>  
<div class="row col-xs-2">
  <img style= "width: 25%; height: 25%"  src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog">
</div>
<div class="row col-xs-2">
  <img style= "width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically">  
</div>  
</div>

Upvotes: 4

Views: 34886

Answers (4)

Nehil Koshiya
Nehil Koshiya

Reputation: 685

<img style= "width: 25%; height: 25%"  src="webfina/2.png" alt="Kermit the Dog">

<img style= "width: 25%; height: 25%" src="webfina/3.png" alt="Peach posing magestically">

Upvotes: 0

shabudeen shaikh
shabudeen shaikh

Reputation: 81

    **YOu need to put everthing in row then add one div with a class .center make the div center finally offset the the first column**  
    ==============================================================


<style>
    /*CENTER COLUMN */
    .align-center {
        text-align: center;
    }
    /*CENTER DIV*/
    .center {
        margin: 0 auto;
        width: 80%;
    }
</style>
<div class="container">
    <div class="row">
        <div class="center">
            <div class="col-xs-2 align-center col-xs-offset-3"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt"> </div>
            <div class="col-xs-2 align-center"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog"> </div>
            <div class="col-xs-2 align-center"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically"> </div>
        </div>
    </div>
</div>

Upvotes: 0

user4739287
user4739287

Reputation: 

<div class="row">

<div class="col-lg-4 col-md-4 col-xs-4 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
    </a>
</div>
<div class="col-lg-4 col-md-4 col-xs-4 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
    </a>
</div>
<div class="col-lg-4 col-md-4 col-xs-4 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
    </a>
</div>

Upvotes: 7

Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

your code should be like this..

dont put class row on every col..

<div class="container">
  <div class="row">
    <div class="col-xs-2">
  <img style="width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt">
</div>  
<div class="col-xs-2">
  <img style="width: 25%; height: 25%" src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog">
</div>
<div class="col-xs-2">
  <img style="width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically">  
</div> 
  </div>
</div>

sample code

Upvotes: 0

Related Questions