How to Center a Button in Bootstrap's Jumbotron?

Viewed 5285

I'm having trouble centering a button in the bootstrap jumbotron. I have tried using text align center, margin auto 0 px, and other solutions on Stack Overflow. I have my button inside a container which is inside the jumbotron. I don't want to center the container because then the text on the jumbotron would also be centered, which I don't want. I just want the button to be centered.

Here is my HTML Code

<div class="jumbotron">
     <div class="container" >
        <h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
        <button type="button" class="btn btn-primary text-center">
           Projects
        </button>
     </div>
  </div>

Here is my CSS Code

.jumbotron {
padding: 20em;
background-image: url("../img/website-background.jpg") !important;
height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.jumbotron .container h2 {
color: white;
position: relative;
bottom: 100px;
}
.jumbotron .container button {
text-align: center;
}
3 Answers
Related