How to get three equal-width columns?

Question

I was trying to make three equal columns in js fiddle and they display as separate rows for some reason. What have I done wrong?

JSFiddle

<div class="container">
  <div class="row">

    <div class="col-md-4">
      cczfsd
    </div>

    <div class="col-md-4">
      sfdfds
    </div>

    <div class="col-md-4">
      sdfssd
    </div>

 </div>
</div>

If you include their [CDN](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css) source instead of their dist it works fine. See [getting started](http://getbootstrap.com/getting-started/) — jnthnjns, Sep 30 '15 at 12:48
Their dist file that you included isn't being parsed by jsfiddle. If you try their button, for example, you will see that it doesn't work either. — jnthnjns, Sep 30 '15 at 12:52
@Asok Your option isn't working as well. [jsfiddle](https://jsfiddle.net/Alexnotonfire/yocb65jL/3/) — Thomas Miller, Sep 30 '15 at 12:56
I'll take a look at it, it is working in my fork of your original. [jsfiddle](https://jsfiddle.net/2ca60gpx/) — jnthnjns, Sep 30 '15 at 13:02
Yeah it was working, since you are using `col-md` you have to grow your output fairly large. Try `col-sm` or `col-xs` to keep the side by side for smaller devices — jnthnjns, Sep 30 '15 at 13:04
@Asok Very odd thing. Check out what I [see](http://imgur.com/hqUVD9e) — Thomas Miller, Sep 30 '15 at 13:05
Odd indeed, that isn't what I am getting, browser related? What did you do to resolve? — jnthnjns, Sep 30 '15 at 13:10
@Asok I got this problem. It worked with col-xs and I had this working on the large display cause my laptop is pretty small — Thomas Miller, Sep 30 '15 at 13:15

score 0 · Answer 1 · answered Sep 30 '15 at 12:43

0

In this case, flex display would come in handy.

<div class="container">
    <div class="row">
        <div>cczfsd</div>
        <div>sfdfds</div>
        <div>sdfssd</div>
    </div>
</div>

CSS

.row {
    display:flex;
}

answered Sep 30 '15 at 12:43

Jesse

1,262
1
9
19

doesn't this will override whenever you use the .row class any further in your application..? – Himesh Aadeshara Sep 30 '15 at 13:14
While this does get close to addressing the OP question title, it is missing `.row>div { flex: 1 0 0px; }` for the equal width portion of the question and doesn't address the underlying issue that is at the heart of the question which is getting Bootstrap to work properly. – jnthnjns Sep 30 '15 at 13:16

CodeRomeos · Answer 2 · 2015-09-30T13:00:04.360

0

Add bootstrap in fidlle

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

Then re-size the output box.` Works as intended.

edited Sep 30 '15 at 13:00

answered Sep 30 '15 at 12:43

CodeRomeos

2,428
1
10
20

The most interesting thing is that your example doesn't work for me either – Thomas Miller Sep 30 '15 at 12:54
It seems you have not resized the output box. visit the fiddle or see the updated answer. – CodeRomeos Sep 30 '15 at 13:00
I think It depends on computer screen width, my laptop is small enough. – Thomas Miller Sep 30 '15 at 13:08

score 0 · Answer 3 · answered Sep 30 '15 at 12:53

0

If you are not using boostrap, add following css to get the correct output.

.col-md-4 {
width: 33.3333%;
float:left;

}

JsFiddle

answered Sep 30 '15 at 12:53

rifa_at_so

326
1
6
18

score 0 · Answer 4 · answered Sep 30 '15 at 12:58

0

Make sure whether you have included bootstrap css properly in that html else check that link is working properly.

answered Sep 30 '15 at 12:58

Saran

388
1
4
16

I deleted dist and included the following [link](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css) to my [fiddle](http://jsfiddle.net/Alexnotonfire/yocb65jL/5/) – Thomas Miller Sep 30 '15 at 13:00

score 0 · Accepted Answer · answered Sep 30 '15 at 13:09

hi as your is working perfect for the desktop screens properly it is not working for the mobile,tablet and other small resolution devices so that you can't getting done your output

i think there is no issue of including the bootstrap's css again because it's already loaded i think issue is with this of managing the screen wise

here is the code may you want the output please look it out'

.temp{
    background-color:#e2e2e2;
    border:1px solid grey;
}

<div class="container">
  <div class="row">

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      cczfsd
    </div>

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      sfdfds
    </div>

    <div class="col-md-4 col-xs-4 col-sm-4 temp">
      sdfssd
    </div>

 </div>
</div>

and here is the demo working code for this

DEMO CODE

If the idea is to have the same amount of columns at every screen size you only need to include the `xs` size like so `col-xs-4`. Additionally, if you want every size below a certain breakpoint to be 12 columns you don't need to include the smaller size sets. e.g. `col-md-4` on it's own will make `md` and `lg` sizes 4 columns and `xs` and `sm` sizes 12 columns. — Novocaine, Sep 30 '15 at 14:00

How to get three equal-width columns?

5 Answers5