CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Popokoko
Popokoko

Reputation: 6543

CSS: creating a certain layout using bootstrap

I'm trying to create a certain layout using bootstrap:

enter image description here

But unable to achieve 2 main principles in my layout:

  1. in the first row, div 2 should be 'sticked' to the bottom of it's column (relayed on div1's height).
  2. in the second row, i have 3 divs i want to align at center (while using bootstrap grid system!)

edit: regarding the 2nd row: i tried using 3 columns lets say 3-col for each div (since i want the margin on the right and left) but i remain with an offset of 3 more which i cant divide equally. so i decided changing it to col-4 with a margined container, that's my solution to it:

<div class="container" style="padding: 0 80px;">
<div class="row">
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div1</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div2</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div3</div>
    </div>
</div>
</div>

http://jsfiddle.net/tomico/y7xesq6v/

Hope anyone could explain how can i handle this 2 issues

Upvotes: 0

Views: 83

Answers (2)

maioman
maioman

Reputation: 18764

You could just use a margin-top with % for .div2

       .div2 {margin-top:50%}

For your second issue what's been said above will work, here's how the code should look:

<div class="row">
                     <div class="wrap">
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div3</div>
</div>
   </div>

then add CSS for wrap

        .wrap {width:50% ; margin:0 auto } //or 800px or whatever

Upvotes: 0

ImAtWar
ImAtWar

Reputation: 1143

Would this suffice? 

.div1{position:relative;margin-top:20px;float:left;}
.div2{position:absolute;float:left;right:0px;top:40px;}

As for the 3 div row, i would wrap those three up with another div, to center just that one div containing the other three divs. 

    // Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

from : Bootstrap Source

Upvotes: 0

Related Questions