Bootstrap Alert Size Change

I think it would work to just take the code from the question

<div class="alert alert-success">

and add one of the column classes like this

<div class="alert alert-success col-md-3">

Something like that worked for me anyhow, my exact code was

<div class="alert alert-info alert-dismissible col-md-3" role="alert">

Made a nice small alert out of it just a bit bigger than a button.

Using some CSS

.alert {
   width:40%;    
}

Example

http://www.bootply.com/96921

The example above makes the alert width 40% of the container, or in this case the screen.

You can also set a fixed width.

.alert {
   width:300px;    
}

if you want that the alert is juste the size of the inner text :

.alert {
  display:inline-block;
}

Placing it in a row and offsetting its col did it for me.

<div class="row">
    <div class="alert alert-danger col-md-4 col-md-offset-4" align="center">

    </div>
</div>

Related