Ayush Vora
Ayush Vora

Reputation: 11

Bootstrap col-md-4 not working

What should be 3 columns only shows up as 1 column. Removing col-md-12 doesn't help. I've also tried changing container to container-fluid. I use NetBeans 8.1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://i.imgur.com/ddz8HjF.jpg">
          <h2>Manufacturing & Quality</h2>
          <p>Flextron’s manufacturing facility is well
            <br>equipped with fully and semi-automatic
            <br>hi-tech equipments capable of placing
            <br>variety of SMT and Through-Hole components
            <br>on Flexible and Rigid PCBs.
            <br>
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://i.imgur.com/qpakutc.jpg">
          <h2>Our Capabilities</h2>
          <p>We offer the latest in SMT, THT, BGA and
            <br>Micro-BGA capability, in addition to mixed
            <br>technology PCB assembly. Keeping on the
            <br>forefront of component requirements, we
            <br>offer surface mount placement down to 12 mil
            <br>pitch, with a component range of 0201 to 52
            <br>mm square QFPs and BGAs....
            <br>
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="http://i.imgur.com/ddz8HjF.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 3468

Answers (2)

I fixed it by adding the following classes to each of my col-md-4 divs:

  • d-block
  • mx-auto

Upvotes: 0

Your viewport isn't wide enough for col-md-* classes to work.

Check this fiddle: https://jsfiddle.net/m7s3pnt3/

If you replace it with col-sm-* classes, it'll align in three columns.

Upvotes: 3

Related Questions