Bootstrap Grid to Put Elements Side by Side question

Hello!

So this question is related to the quiz here

The tutorial did mention that col-xs-4 needs to be in a div but I can’t find any sources on why placing ‘col-xs-4’ into the button class doesn’t work? Why must <button> be nested in a <div> for ‘col-xs’-4’ to work?

Thanks

My code:

<!--This works-->
  <div class="row">
    <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
    <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
  </div>

<!--This doesn't work-->
  <div class="row">
    <button class="btn btn-block btn-primary col-xs-4">Like</button></div>
    <button class="btn btn-block btn-info col-xs-4">Info</button></div>
    <button class="btn btn-block btn-danger col-xs-4">Delete</button></div>
</div>

Result (look at line 38-40):

Working Correctly

Not Working

1 Like

That is because both the .col-* class and the .btn-block class are changing the width property.

For example:

  • col-*-6 will make the width be 50% (half as 6 is half of 12)
  • col-*-4 will make the width be 33.33% (1/3 as 4 is 1/3 * 12)

The problem is that the btn-block class is adding: width:100% and display:block.
Which is in conflict with the .col-* classes width…

This is why you need to have a container (aka: div with col-* class) and inside of it put the button.
Also this will ensure that you have a nice padding around the buttons too.

5 Likes

Thanks! Still need to wrap up my head on what you just wrote.

So I guess this is what one calls CSS debugging? As when using libraries we need to be aware what each class is actually doing and if such action will cause conflict with other classes?

was also wondering why we had to use div elements.
just learnt something good. thanks @Flopet17.
PS: does this this mean that without using the btn-block class, our code would work just fine?

1 Like

how to make it side to side

ahh thanks! Wouldn’t it be good if this fact is mentioned or added in FCC?

I was wondering exactly that! Thanks :slight_smile:

I’ve a question regarding this challenge. I am new to the forums and I don’t know if I am supposed to ask it here or create a new topic. Please let me know if I have to create a new topic.

Here goes the question:
After going through the steps detailed in the challenge, I got the following result:

My question is:
Why is there space between the 3 buttons? Since each button is of width 4 columns and the entire row is divided into 12 columns, shouldn’t the buttons fill the row exactly?
Thank you

1 Like

http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/

2 Likes

Thanks. I understand it now.

I am interested in a reply to @Akella-Sai-Chaitanya 's question but this link doesn’t work anymore :frowning:

Here is the updated link: https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7