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?
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.
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?
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