Set size and center alert box in twitter bootstrap

<div class="container-fluid">
    <div class="row">

        <div class="col-md-10 col-md-offset-1">
            <div class="alert alert-warning alert-dismissible fade in text-center" role="alert">
                <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
            </div>
        </div>

  </div>
</div>

The class text-center functions as expected. Wrapping the .alert within the Bootstrap Grid also provides you the ability to restrict the total width of the notification.

Double-check that you don't have additional CSS that might be overriding your code. This was tested in Bootply: http://www.bootply.com/MFv1HMC0G7

To align the alert to the center without adding extra containers, I customized the Bootstrap alert class to look as follows.

.alert {
  left: 0;
  margin: auto; // Centers alert component
  position: absolute; // So that it will display relative to the entire page
  right: 0;
  text-align: center; // Centers 'Alert Test' text
  top: 1em;
  width: 80%;
  z-index: 1; // Displays over app and bootstrap Navbar
}

If you don't want to directly override the base alert class from Bootstrap you can rename the class to whatever you like and reference that class instead.

For this I used React to display my components and included them like this:

Alerts.jsx

<div className="alert alert-primary alert-dismissable fade show" role="alert">
  Alert Test
  <button className="close" type="button" data-dismiss="alert">
    <span>&times;</span>
  </button>
</div>

App.jsx

<>
  <Alerts />
  <Navigation />
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/login" component={LoginPage} />
  </Switch>
</>

The Alerts.jsx component is imported into the App.jsx component and the result looks something like this.

Use center-block instead of text-center with alert if you want to center align the whole alert.

<div class="alert alert-info center-block" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong>  It's just an alert... </div> 

If you want to center align the text inside of alert use as:

<div class="alert alert-info" style="width: 80%;" role="alert">
    <p class="text-center">
     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>        <strong>Hey!</strong>  It's just an alert... 
    </p>
</div>