CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tom Hammond
Tom Hammond

Reputation: 6080

Creating a layout in bootstrap

I'm trying to translate a design from a designer into html/css using bootstrap but I'm struggling to get it to work. Each square will be a different image, but for now I've just been playing with divs with borders.

When on a mobile device each image should be in a single column - so it seems like they should be col-xs-12.

Any idea how I should replicate this using bootstrap?

enter image description here

Upvotes: 0

Views: 129

Answers (2)

matthewelsom
matthewelsom

Reputation: 944

You will struggle to replicate this kind of layout using bootstrap - The bootstrap grid works on a row based principle, that means your columns with fit nicely together horizontally, but not vertically - new elements will always clear the larger element above it which will leave gaps (I have attached an example of the BS issue).

You are much better off using something like Masonry or Flex to achieve a layout like this. 

.one {
  background: yellow;
}
.two {
  background: red;
  height: 100px;
}
.three {
  background: blue;
  height: 50px;
}
.four {
  background: orange;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class "row">
    <div class="col-sm-6 one">There is a gap under me above 768px width because div elements three and four will always clear the largest height of elements above.</div>
    <div class="col-sm-6 two">two</div>
    <div class="col-sm-6 three">three</div>
    <div class="col-sm-6 four">four</div>
  </div>
</div>

Upvotes: 1

Poyatoo
Poyatoo

Reputation: 104

Add the class col-xs-12 to all div that you will be using and add the classes col-md-x, x could be a any number from 1 to 12.

For divs with 2 tiles in 1 column, add 2 divs with the class col-md-6

The height of the divs shall be set manually

Upvotes: 1

Related Questions