-1

I have created a simple alert using Bootstrap 4. For some reason I can't get the text in my message to align with the top of the (i) icon. I've tried setting margins and padding to 0 on the div but nothing works. Can someone explain how to fix this? I would like the top of the text to align with the top of the icon IN the card, and the card to be centered vertically and horizontally.

Code is below:

  <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-10">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
              <div class="pt-0 mt-0">
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

I tried pt-0 and mt-0 but they have no effect

UPDATE: As pointed out below PANEL should be replaced with CARD. I can get close with answer below:

 <div class="container">
    <div class="row justify-content-center h-100">
      <div class="col-sm-9 col-md-10 my-auto">
        <div class="card border-0">
          <div class="card-block">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
              <div>
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

But can't get it to center the entire card vertically as described in this SO answer

TSG
  • 4,242
  • 9
  • 61
  • 121
  • There is no panel class in Bootstrap 4. Also, the title doesn't seem to describe the question. Can you clarify? Are you trying to align the icon and alert text vertically, or are you trying to remove the padding/margins. – Carol Skelly Aug 29 '17 at 19:46

3 Answers3

0

Use a .row in the wrapping element <div class="row alert alert-info"> and then depending on how you want to distribute that row you give it the columns. I used .col-1 and .col-10 in this case.

.col-1 in Bootstrap 4 is the same as the previous col-xs-1. More info check the Grid system - Boostrap 4 docs 

 <div class="container">
<div class="row justify-content-center h-100">
  <div class="col-sm-9 col-md-10 my-auto">
    <div class="card border-0">
      <div class="card-block">
        <!-- Added the align-items-center class next to row -->
        <div class="row alert align-items-center alert-info">
          <i class="col-1 fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
          <div class="col-10">
            My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
            text for several lines! My message here. Lots of text for several lines!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Edgar Henriquez
  • 1,373
  • 1
  • 14
  • 17
0

@TSG, maybe this is what you're looking for... https://codepen.io/cowanjt/pen/rzQzJj

You can use the bootstrap 4 utility float-left on your i element, as well as mr-2 to give some spacing between the icon and your text.

 <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-10 my-auto">
        <div class="card border-0">
          <div class="card-block">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
              <div>
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

To center it vertically, you can use some CSS to get your desired look. The CSS position attribute, in conjunction with the top and left attributes will remove the element from the flow of the document and other elements. There's a css-tricks article that can give you an in-depth understanding of the attribute and its values. 

.container {
  position: absolute;
  top: 40%;
  left: 30%;
}
Jade Cowan
  • 2,543
  • 1
  • 18
  • 32
  • Yes - close! I had to replace PANEL as ZimSystem points out above that is replaced with CARDs in bootstrap 4. As well - can you center this verticalyl? (I have updated my code in question with the code from your answer) – TSG Aug 29 '17 at 20:20
  • Are you trying to, essentially, center the alert in the middle of the screen? – Jade Cowan Aug 29 '17 at 20:31
  • yes - exactly. The code (updated above) centers horizontally but not vertically. I have tried adding h-100 to various elements but even the containing div never seems to go beyond the height of the card. I tried 3 methods as outlined in the link above, but none seem to work. – TSG Aug 29 '17 at 20:32
  • no - something around the container is limiting height. This is an angular 4 app with a router outlet controlling output. So not sure how to apply the height to the surrounding container. – TSG Aug 29 '17 at 21:28
  • You could put it in the .css file (or the file extension for whatever css preprocessor your using) for the component, but your outside the scope of your original question. You're probably better off rephrasing your question to include the fact that you need address this in the context of working with angular 4, in addition to including the relevant code. – Jade Cowan Aug 29 '17 at 22:01
0

You can use float-left class on your icon and some padding right (pr-2) and that works!

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9 col-md-10">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="col-xs-12 alert alert-info">
            <i class="fa fa-info-circle fa-3x float-left pr-2" aria-hidden="true"></i>
            <div>
              My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Filipe Leal
  • 11
  • 3