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>
3
Answers
Use
center-block
instead oftext-center
withalert
if you want to center align the whole alert.If you want to center align the text inside of alert use as:
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.
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
App.jsx
The
Alerts.jsx
component is imported into theApp.jsx
component and the result looks something like this.