CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Kyungmo Kim
Kyungmo Kim

Reputation: 73

how to design the div tag with bootstrap

I tried to make multiple boxes like below with bootstrap enter image description here

all the images were the same height, but different widths, so I tried to use a grid system, but it doesn't work. What does that "doesnt work" mean? If I put col-md-4 for image1, and put col-md-2 for following txt, put col-md-3 for image2, all the grid system widths and heights adjust automatically, so all the heights of the images are different.

Could you please help me with this problem?

Upvotes: 0

Views: 873

Answers (2)

timolawl
timolawl

Reputation: 5564

Masonry comes to mind, but there apparently is also a horizontal one: masonryHorizontal.

Upvotes: 1

Andrew
Andrew

Reputation: 16

Are you using a containing element to house the grid system? For example Bootstrap 3 uses:

<div class="container">
 ...
</div>

Additionally, the Bootstrap grid system scales up to 12 columns as the viewport size increases. If you want three even columns on the top row try something like this:

<div class="container">
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
</div>

Check out this js fiddle https://jsfiddle.net/andrewjst/3gtst4c2/ - It has the same column set you have shown in your picture.

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
  </div>
</div>

Upvotes: 0

Related Questions