Set size and center alert box in twitter bootstrap

Question

I'm trying to center and set the size to 80% of an alert box, however it's not working with the class text-center.

 <div class="text-center">

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

</div>

Answer 1

<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

Answer 2

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>