How to center everything in jumbotron using twbs:bootstrap in Meteor - html

Question

I've been doing this for hours trying all the ways and I can't get these buttons to move.
I'm not sure how to override the CSS to do any margin tricks.
All I need is for everything in the jumbotron, text and button group, to be perfectly center.
<template name="Jumbotron">
<div class="jumbotron center">
<h1>Hello, world!</h1>
<p>Get Started Now</p>
<div class="btn-toolbar">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</template>

Answer 1

Change the display property to inline-block for the btn-toolbar class.
See Example Snippets.
.btn-toolbar.meteor-btn-toolbar,
.btn-toolbar.meteor-btn-toolbar2 {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
<h1>Hello, world!</h1>
<p>Get Started Now</p>
<div class="btn-toolbar meteor-btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="..."> <a role="button" class="btn btn-primary btn-lg">Learn More</a>
<a role="button" class="btn btn-primary btn-lg">Learn More</a>
</div>
</div>
</div>
<hr>
<div class="jumbotron text-center">
<h1>Hello, world!</h1>
<p>Get Started Now</p>
<div class="btn-toolbar meteor-btn-toolbar2"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>