Bootstrap Alert Size Change - css

Question

Is there a way I could edit how far an alert could stretch across the page, so it doesn't go all the way across?
Here's an example of my alerts:
<div class="alert alert-success">Your first number was correct.</div>

Answer 1

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;
}

Answer 2

if you want that the alert is juste the size of the inner text :
.alert {
display:inline-block;
}

Answer 3

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>

Answer 4

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.

Answer 5

In newer versions of Bootstrap (v4 and v5), you can use this simple width modifier (w-25, w-50, w-75):
<div class="alert alert-danger w-50" role="alert">
You have been altered, dangerously!
</div>
https://getbootstrap.com/docs/4.5/utilities/sizing/#relative-to-the-parent
https://getbootstrap.com/docs/5.0/utilities/sizing/

Answer 6

If your alert is part of a .row then setting its class to include .col-lg-12 will force it to span across its container.

Answer 7

If you are using Bootstrap 4.0 or above your can make use of d-inline-block.
Here is an example how to use it:
<div class="alert alert-success d-inline-block" role="alert">
This is a success alert—check it out!
</div>
In bootstrap's documentation you can read more about the display property.

Answer 8

Simply use a span instead of a div. It is again the same "inline vs block elements" dilemma.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info">div alert</div>
<span class="alert alert-info">span alert</span>
Available since, at least, bootstrap v3.