www.webdeveloper.com
Results 1 to 2 of 2

Thread: BootStrap grid solution - How am I doing?

  1. #1
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    88

    BootStrap grid solution - How am I doing?

    Hi, I'm learning BS and I think I get this grid system thing. I was wondering If someone could check my code and let me know if there was a better way to do it?

    The jsFiddle comes out a bit weird, but on a normal browser it looks right though: http://jsfiddle.net/n2fole00/ABqUV/3/
    HTML Code:
    <div id=class="container">
    <div class="row"><!-- MAIN ROW -->
            
        <div class="col-sm-5 col-box">
            <div class="row">
                <div class="col-sm-12 col-box">
                    <h3>CONTENT ONE</h3>
                </div>
                <div class="col-sm-12 col-box">
                    <h3>CONTENT TWO</h3>
                    <h3>CONTENT TWO</h3>
                    <h3>CONTENT TWO</h3>
                </div>
            </div>
        </div>
           
        <div class="col-sm-7 col-box">
            <h3>CONTENT THREE</h3>
            <h3>CONTENT THREE</h3>
            <h3>CONTENT THREE</h3>
            <h3>CONTENT THREE</h3>
        </div>
            
        <div class="col-sm-12 col-box">
            <h3>CONTENT FOUR</h3>
        </div>
    
    </div><!--/END MAIN ROW -->
    </div><!--/END CONTAINER -->
    Thanks

  2. #2
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    88
    Ok, I think this is more like it.
    HTML Code:
    <div class="container">
        
        <div class="row">    
            <div class="col-sm-5 col-box">
                <div class="row">
                    <div class="col-sm-12 col-box">
                        <h3>CONTENT ONE</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-box">
                        <h3>CONTENT TWO</h3>
                        <h3>CONTENT TWO</h3>
                        <h3>CONTENT TWO</h3>
                    </div>
                </div>
            </div>
               
            <div class="col-sm-7 col-box">
                <h3>CONTENT THREE</h3>
                <h3>CONTENT THREE</h3>
                <h3>CONTENT THREE</h3>
                <h3>CONTENT THREE</h3>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12 col-box">
                <h3>CONTENT FOUR</h3>
            </div>
        </div>
    
    </div><!--/END CONTAINER -->

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles