Twitter Bootstrap Question posted in

Twitter bootstrap – How to migrate this Bootstrap grid from v2.x to v3.x

I want to create this grid with twitter bootstrap 3. 

<div class="container-fluid border">
    <div class="row-fluid debug2">
        <div class="span2 debug">aa</div>
        <div class="span3 debug">bb</div>

        <div class="span3 debug" style="float:left; height:300px;"></div>
    </div>

    <div class="row-fluid">
        <div class="span3">xxx</div>
    </div>

</div>

Grid Picture

Tags:

2

Answers


  1. 0

    You can find guidance on how to upgrade from Bootstrap v2.x to v3.x here.

    row-fluid is now row

    .span* is now .col-xs-*, .col-sm-*, .col-md-* or .col-lg-*. Configure depending on the screen size.

    Basically it translates to this:

    <div class="container border">
    <div class="row debug2">
        <div class="col-md-2 debug">aa</div>
        <div class="col-md-3 debug">bb</div>
        <div class="col-md-3 debug" style="float:left; height:300px;"></div>
    </div>
    <div class="row">
        <div class="col-md-3">xxx</div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Try this

    .border {
  border: 1px solid grey;  
    
}
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-12">
        <div class="row">

       
            <div class="col-xs-12">
                <div class="row ">
                 
                    <div class="col-xs-4 border" style="height:150px;"></div>
                    <div class="col-xs-2" ></div>
                    <div class="col-xs-3 border" style="height:50px;"></div>
                     <div class="col-xs-3 border" style="height:50px;"></div>
                 
                      <div class="col-xs-4"></div>
                    <div class="col-xs-8 border" style="height:250px;"></div>
                </div>
            </div>
            
           
            
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search