CODEWITHSUNDEEP
csstwitter-bootstraprowhtml
user2178964
user2178964

Reputation: 154

Bootstrap span inside a span

I have some difficulties to understand how put span inside span with bootstrap.

I want to have one block centered, with inside :

-One row with inside :
-One block at left (span6) -One block at right (span6)

-One row with inside : -One button centered (span 6 offset3)

You could see the problem here : http://jsfiddle.net/UBTv4/18/

<div class='row'>
<div class='span6 offset3'>
    <div class='well'>
        <h2>Title</h2>      
            <div class='row'>
                <div class='span6'>
                    <p class="lead">Bloc left : </p>
                </div>              
                <div class='span6'>
                    <p class="lead">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

What is the problem ?

I want something like that :

enter image description here

Upvotes: 0

Views: 5452

Answers (3)

Jakub Matczak
Jakub Matczak

Reputation: 15656

Here is your solution.

<div class='row'>
    <div class='span6 offset3 well' >  <!-- .well class here instead of inner div -->
            <h2>Title</h2>      
                <div class='row'>
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc left : </p>
                    </div>              
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc right : </p>
                    </div>
                </div>
                <div class='row'>
                    <div class='span3 offset3'>  <!-- instead of span6 -->
                        <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                    </div>
                </div>
        </div>
</div>

http://jsfiddle.net/UBTv4/23/

As explanation I'll suggest you to carefully read Nesting column section from this link:

http://getbootstrap.com/2.3.2/scaffolding.html

In short description, if you nest row in a span6, the sum of inner row spans should be 6 also (3+3).

Also .well class has some paddings/marings, so you can't you it "between" parent and nested rows/spans.

Upvotes: 3

Harsha Jagadish
Harsha Jagadish

Reputation: 1

You could also use pull-right and pull-left to make the respective blocks move left and right.

</div>              
                <div class='span6'>
                    <p class="lead pull-right">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

You can see the code here:http://jsfiddle.net/UBTv4/18/

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

I think you want to use .row-fluid instead. This will get your 2 .span6 is one row.

Here is the updated fiddle: http://jsfiddle.net/skelly/UBTv4/22/

Upvotes: 0

Related Questions