[Answered ]-Bootstrap CSS – Info Box Alignment

by

1👍

✅

you can display:flex property;

Take a look here and you can customize it as you like:

https://www.bootply.com/94SfnOPfd4 and also https://www.bootply.com/KndnEHLYCb

<div class="alert alert-info" style="text-align: center;width:300px;display: flex;" role="info">
  <span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;float: left;margin: auto;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
  <span style="font-size: 13px; vertical-align: middle;text-align: initial;" class="alert-info" role="info">Please help support your chosen charity <b>chosenCharity</b> and the str8RED development by signing up for additional benefits.</span>
</div>
👤tech2017

1👍

I suggest to wrap the info in a div container and add this class info-container.. and apply vertical-align:middle property like the example

.info-container{
   display: inline-block;
    width: calc(100% + -50px);
    vertical-align:middle;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" style="text-align: center" role="info">

          <span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>

          <div class="info-container">
          <span style="font-size: 13px; vertical-align: middle;" class="alert-info" role="info">Please help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additional benefits.</span>
          </div>
        </div>
👤Renzo Calla

Leave a comment