Twitter Bootstrap Question posted in

Set size and center alert box in twitter bootstrap

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    <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

    Login or Signup to reply.
  3. 0

    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.
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search