CODEWITHSUNDEEP
csstwitter-bootstrap
jsldnppl
jsldnppl

Reputation: 913

Bootstrap Image Between Column

What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.

enter image description here

Upvotes: 0

Views: 1399

Answers (2)

isherwood
isherwood

Reputation: 61083

This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.

.row.shift-left {
    margin-left: -20px;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-11 col-xs-offset-1">
            <div class="row shift-left">
                <div class="col-xs-3">
                    <div class="row">
                        <div class="col-xs-9">Words words words.</div>
                        <div class="col-xs-3">
                            <img src="http://placehold.it/300x800" class="img-responsive" />
                        </div>
                    </div>
                </div>
                ...

Demo

Upvotes: 0

Junaid S.
Junaid S.

Reputation: 2652

Simple 

<div class="row">

    <div class="col-xs-3 pull-left">
      <div class"col-xs-10">
        <img src="envelop.png" class="img-responsive"/>
      </div>
      <div class"col-xs-2 text-center">
        <img src="plus.png" class="img-responsive"/>
      </div>
    </div>

    <div class="col-xs-3 pull-left">
      <div class"col-xs-10">
        <img src="envelop.png" class="img-responsive"/>
      </div>
      <div class"col-xs-2 text-center">
        <img src="plus.png" class="img-responsive"/>
      </div>
    </div>

    <div class="col-xs-3 pull-left">
      <div class"col-xs-10">
        <img src="envelop.png" class="img-responsive"/>
      </div>
      <div class"col-xs-2 text-center">
        <img src="plus.png" class="img-responsive"/>
      </div>
    </div>

    <div class="col-xs-3 pull-left">
      <div class"col-xs-10">
        <img src="envelop.png" class="img-responsive"/>
      </div>
      <div class"col-xs-2 text-center">

      </div>
    </div>
</div>

PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.

Upvotes: 1

Related Questions