Button block question

1

Will someone please explain to me why one of these blocks of code works, and the other doesn’t?

I want the buttons to display in the same row, however the first block of code will set the whole span of the div with one button, and 3 rows.

<div class="row" id="btnrow">
        <div class="col-xs-4>"><button class="btn btn-block btn-primary">LinkIn</button></div>  
        <div class="col-xs-4>"><button class="btn btn-block btn-success">Git</button></div>
        <div class="col-xs-4>"><button class="btn btn-block btn-pimary">Test</button></div>
</div>

2nd group of code

<div class="row" id="btnrow">
          <div class= "col-xs-4"><button class="btn btn-block btn-primary">LinkdIn</button></div> 
          <div class= "col-xs-4"><button class="btn btn-block btn-info">GitHub</button></div>
          <div class= "col-xs-4"><button class="btn btn-block btn-danger">test</button></div>
</div>`
2

It could be the spaces between class= and 'col-xs-4' in group 2? Can’t test it as I’m on my phone.

Also, are both these blocks intended to be on the same page? If so, you should make the id for each block unique.

1 Like
3

I want the buttons to display in the same row, however the first block
of code will set the whole span of the div with one button, and 3 rows.

4

Do you have a codepen link?

5

nvm, I’ve got my computer and made my own pen. I can replicate the problem, but can’t see what’s causing it yet. Gimme a minute :slight_smile:

6

Ah! Got it! There is a sneaky > in the col-xs-4 part of group 1.

Took me some fine tuning with the inspector in the dev tools to even spot it. Damn near invisible!!!

2 Likes