CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
EspenG
EspenG

Reputation: 537

Trouble with Bootstrap grid

My page look like this on pc:

enter image description here

And I won't it to be like this on mobile size:

enter image description here

Is it possible to work that out?

Upvotes: 0

Views: 82

Answers (2)

jorge9200
jorge9200

Reputation: 19

I'll implement to divs "left col" and "right col" and then I'll put to divs in first col (left col).

Something like this:

<div class="content" style="height:1000px;">
<div class="left-col col-xs-4 col-md-4">
  <div class="col-xs-12 col-xs-12">DIV 1</div>
  <div class="col-xs-12 col-xs-12">DIV 2</div>
</div>
<div class="right-col col-xs-8 col-xs-8">
  <div class="col-xs-12 col-md-12">DIV 3</div>
</div>
</div>

Also you have to use a style="display:in-line;" for the divs you want be close one to other and style="display:block;" for the ones you want one over other.

Other problem you can have is that divs doesn't fit in one row, take a look of responsive design of bootstrap:

Bootstrap alredy brings responsive design, but only to 768px (Ipad width). You can use this bootstrap functionality with their column system:

.col-xs- to <768px .col-sm- to ≥768px .col-md- to ≥992px and .col-lg- to ≥1200px

there is more info in the web: http://getbootstrap.com/css/

If you want responsive design below 768 you will need to do it yourself by using:

@media (mix-width: 600px, max-width: 768px) for example.

Upvotes: 0

Preben
Preben

Reputation: 1277

See here: http://getbootstrap.com/css/#grid-example-mixed

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

The above is the place to read.

This is what I would have done: I would have made 2 columns first, and inside the first column I would have added two divs on top of each other.

I have used style="" in each div to show you clearly added CSS

http://jsfiddle.net/Preben/gmvuv8L0/

<div class="row">
      <div class="col-xs-6" style="min-height:300px;">
         <div style="width:100%;margin-bottom:20px;background:#cecece;min-height:180px;">content</div>
         <div style="width:100%;background:#cecece;min-height:100px;">content</div>
      </div>
      <div class="col-xs-6" style="background:#cecece;min-height:300px;">Column # 2</div>
</div>

enter image description here

enter image description here

Upvotes: 2

Related Questions