CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgridbox
YoungDo Choi
YoungDo Choi

Reputation: 13

Boostrap / Grid System / CSS Workaround

Is there a way to do this kind of box/image positioning through Bootstrap 3 Grid system? If not, how do you suppose to code this in plain CSS?

Please click link for picture reference: Box Image

How someone can help me out?

Upvotes: 1

Views: 51

Answers (1)

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

It's possible by Bootstrap Grid System. I think this code will help you. I have done it for whole screen, you can use it for some section for your screen.

<div class="row">
    <div class="col-md-6">
       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>

    <div class="col-md-3">
      <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

      <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>

    <div class="col-md-3">
       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
</div>



<div class="row">
    <div class="col-md-3">
      <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

      <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>


    <div class="col-md-6">

      <div class="col-md-6">
       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>

     <div class="col-md-6">
       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>

       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>


    <div class="col-md-3">
       <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

      <p>Some text..</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
</div>

See this for your clarification about Grid System and See some example Bootstrap Template. I think these will help you.

Upvotes: 1

Related Questions