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 -->

score 9 · Answer 1 · edited Jan 14 '14 at 10:07

9

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>

edited Jan 14 '14 at 10:07

NoobEditor

15,563
19
81
112

answered Jan 14 '14 at 05:47

Samira Khorshidi

963
1
9
29

NoobEditor · Answer 2 · 2014-01-14T06:37:55.267

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 -->

I don't know why the downvote, but you answer answered fully to the question, I upvote, else it's not fair. — BENARD Patrick, Jan 14 '14 at 09:43
@Jahnux73 : hehe..thanks mate...so did you got a final answer...i dont see any accepted answer, you still looking for some explaination or clarification!!?? :) — NoobEditor, Jan 14 '14 at 10:08

score 4 · Answer 3 · answered Jan 14 '14 at 05:23

According to twitter bootstrap:

Rows must be placed within a .container for proper alignment and padding.

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

http://getbootstrap.com/css/#grid-intro

score 1 · Answer 4 · answered Jan 14 '14 at 05:24

1

I cant see the problem´:

http://jsfiddle.net/AYd5t/

you can try using

.col-md-6 instead of .col-xs-6

you can check the documentation here:

http://getbootstrap.com/css/#grid

answered Jan 14 '14 at 05:24

kamus

797
1
6
15

The difference in md vs xs is for responsive sites. if you still want to have 50% columns at the smallest size(xs) then you need to use xs not md. – Chase Jan 14 '14 at 05:26
I've disabled responsiveness on this site, would that be a problem. – Ch'an Armstrong Jan 14 '14 at 05:43
I know! But project requirements. – Ch'an Armstrong Jan 14 '14 at 23:29

score 1 · Answer 5 · answered Nov 12 '19 at 05:54

1

col-xs-* has been dropped in Bootstrap 4+ in favor of col-*

Please find the answer here: `col-xs-*` not working in Bootstrap 4

answered Nov 12 '19 at 05:54

Rijo

2,568
1
22
30

score 0 · Answer 6 · answered Jan 14 '14 at 05:22

I'm not seeing an obvious issue with the snippet you posted. Can you post your full HTML? A JS Bin or JS Fiddle would be ideal.

If that doesn't work for you, perhaps check that you've an outer div with a class called "container", and that your links to the Bootstrap CSS and JS files are valid.

Two 50% columns with Twitter Bootstrap

6 Answers6