Class btn-outline-info doesnt work. All of the other outline classes do not work either. Anyone?

This if the code I used to achieve the same effect as Guil:

<button type="button" class="btn btn-outline-info d-block mx-auto my-3">Don't Miss Out, Register Now</button>

The order of outline and info appears to have been reversed (same with the other button classes) and center-block has been dropped altogether.

d-block moves the button onto the next line and mx-auto (not m-x-auto as stated elsewhere) centers the button.

my-3 adds the margin to the top and bottom (not m-y-3 as stated by Guil as the first dash also seems to have been dropped from the Bootstrap 4 specs).

I hope this helps.

Seeing your code would allow me to give a more precise answer, but here are my suspicions:

• Verify that you are using Bootstrap 4 and not Bootstrap 3 -> http://v4-alpha.getbootstrap.com/
• Check your HTML, are you assigning the .btn class before the .btn-outline-* class
• Check for all closing and opening tags in the entire document, missing one before your button element might be causing this issue.

Here is the correct syntax for each according to the documentation:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Try copy and pasting one of those - if one of those works, you have a syntax error. If one of those doesn't work it could be an error elsewhere in your HTML document or it could be a bug.

Finally, consider that Bootstrap 4 is in alpha and may not be working correctly (I tested this markup in CodePen and JSFiddle and got some weird results).

Let me know if you can share your code and I'd be happy to read through it with you!

I had this same issue while working on my own computer, not workspaces. I updated the bootstrap CDN to the latest one and it worked fine after that.

http://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

Hi Sandra,

Sorry I didn't get back to you earlier – too busy with work.

You're right about the bootstrap site not being easy to navigate. A lot of the coding and documentation has been updated since Guil made the video – the dangers of learning something that is still in development, I guess.

Things have been moved around so that you need to follow a different pathway to find what you need.

I was actually trying to add updated links to the Question section of each video in which there is a broken link, but I can't actually figure out how to get my question in the right section rather than the general discussion board.

If you can enlighten me about that, I'll do my best to post updated links where needed.

Thanks.

Based on Alan's comment, I reversed info and outline in the code snippet and that resulted in the desired effect:

<button type="button" class="btn btn-info-outline">Don't Miss Out, Register Now</button>

More explanation from this stack overflow post:

http://stackoverflow.com/questions/38251191/bootstrap-4-center-block-unable-to-center