Bootstrap col-md-* not working - on codepen

Code Feedback
1

Am trying to fit 3 buttons in a row using bootstrap, but it stacks in a single column, can anyone please let me know whats wrong with my code below:

<link href="css/bootstrap.css" rel="stylesheet">
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4"><button class="btn">about</button></div>
      <div class="col-md-4"><button class="btn">work</button>
        </div>
      <div class="col-md-4"><button class="btn">connect</button>
        </div>
      </div>
  </div>
2

That link to bootstrap won’t work on codepen, because that doesn’t point to a bootstrap CSS file.

Use the CSS panel settings to ‘quick add’ bootstrap.

3 Likes
3

Thanks Jackson, I did a Quick Add for bootstrap and now I can see the buttons have changed to bootstrap buttons (so am guessing bootstrap has been added), but the buttons are still stacked in a single column

Here is the link

4

It is working the way you have told it to - it goes into three columns when the screen is bigger than the md break point.

If you want it to work on all screen sizes, replace the three classes containing md with xs.

1 Like
5

Thanks a lot @JacksonBates - really appreciate your help - its working now :slight_smile:

6

No worries - Bootstrap is super helpful, but it has some little quirks like that that catch us all off guard occasionally. :slight_smile:

1 Like