CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hossein Abedi
Hossein Abedi

Reputation: 31

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

Upvotes: 2

Views: 52

Answers (2)

Duha
Duha

Reputation: 829

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>

Upvotes: 1

Nic
Nic

Reputation: 12846

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>

Upvotes: 1

Related Questions