Two 50% columns with Twitter Bootstrap

Question

How do create 2 columns of 50% with Twitter Bootstrap 3? What I've tried:

<div class="container">
<!-- Footer -->
  <div class="footer">
    <div class="footer-info">
      <div class="row">
        <div class="col-lg-6"><h3>Contact Us</h3></div>
        <div class="col-lg-6"><h3>Products & Services</h3></div>
    </div>      
    </div>
  </div>
</div>    
<!-- End Footer -->

Answer 1

It's your answer:

Jsfiddle : http://jsfiddle.net/g9y4P/

always 50% width

    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
</div> 

Answer 2

First, layout the proper semantic for the grid

Why it's not working in your case??

• You have used col-lg-6 ( demo) which is for Large devices Desktops (≥1200px), you have to gives the classes for smaller screen sizes too, thats what you missed!!( demo with only one column set to adapt to screens )

• Also, since you are following BS markup...its always a good practice to define the width of your container like <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> which makes it adapt to various viewports!

demo

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="container">
        <!-- Footer -->
        <div class="footer" style="border:1px solid #000">
            <div class="footer-info">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <h3>Contact Us</h3>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                         <h3>Products & Services</h3> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--- //container -->
</div>
<!--- //col-xs-12 col-sm-12 col-md-12 col-lg-12-->
<!-- End Footer -->