In Bootstrap how do I align Heading text with Alert text

bootstrap center text vertically
text-truncate bootstrap
bootstrap text color
bootstrap text align
bootstrap text-center not working
bootstrap alert javascript
bootstrap error text
bootstrap alert with icon

In Bootstrap how do I align Heading text with Alert text

So I am using alert class on this page, then a heading and then another alert. Because the alerts are within a box the txt starts further right that the text in the heading. Now I know I can align the text in the heading further to the right using mx-2 class but having to add these extra margins everywhere indicates to me I am doing something in a non Bootstrap way.

Should the heading be within something else so that it automatically lines up with alerts.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>
  <h1 >
    Fix Songs Report 396
  </h1>
  <div>
    <h3>
      Errors and Warnings
    </h3>
    <div>

      <div class="alert alert-warning" role="alert">
        <h5 class="alert-heading">
          Mar 23, 2019, 2:42:06 PM
        </h5>

        <p>
          Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
        </p>
      </div>
    </div>
  </div>
</main>

You can wrap the text that you need to align in a "card" element:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger custom-alert" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>

  <div class="card" style="border:0">
    <div class="card-body">
      <h1>
        Fix Songs Report 396
      </h1>

      <h3>
        Errors and Warnings
      </h3>
    </div>
  </div>
  <div>
    <div class="alert alert-warning custom-alert" role="alert">
      <h5 class="alert-heading">
        Mar 23, 2019, 2:42:06 PM
      </h5>

      <p>
        Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
      </p>
    </div>
  </div>

</main>

8 Examples of align text in Bootstrap 4: Center, Right and more, In this tutorial, I am going to show you live demos of aligning text center, right is applied in a paragraph and h1 to h6 headings to make text aligned centered:. text-lg-right; For left alignment: text-sm-left; text-md-left; text-lg-left; Aligning image centrally by text-center class. Not only you may use the .text-center or other text classes for aligning texts but images as well. In the following example, two images are aligned right and center by using the Bootstrap 4 text alignment classes as follows:

I think there is no bootstrap way to achive your goal. The alert boxes intend to have a different margin than the headings.

I would recommend to change the order of the elements. First the heading, then the errors and then the warnings and leave the margins as there are.

The other way is, as you said before, add a custom css class with margin-left to all elements. Perhaps you can work with global classes for h1-h5.

Edit:

So I think it's a matter of taste. Here is another way, wrap your content in a colorless alert box, so you get the same margin.

    <!doctype html>
    <html lang="en">

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <title>Hello, world!</title>
    </head>

    <body>

      <div class="container-fluid">

        <div class="alert alert-danger" role="alert">
          <h1>
            Preview Only, no actual changes will be made to your music files
          </h1>
        </div>

        <div class="alert">
          <h1>Fix Songs Report 396</h1>
          <h3>Errors and Warnings</h3>
        </div>

        <div class="alert alert-warning" role="alert">
          <h5 class="alert-heading">
            Mar 23, 2019, 2:42:06 PM
          </h5>

          <p>
            Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml
            Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
          </p>
        </div>

      </div>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    </body>

    </html>

Alerts � Bootstrap, Alerts are available for any length of text, as well as an optional dismiss button. Alerts can also contain additional HTML elements like headings, paragraphs� $().alert() Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.) $().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is

This issue only resolved by overriding the bootstrap alert CSS and this is not good practice. I just add overriding CSS in the below code snippet I hope it'll help you out. Thanks

.custom-alert {
  padding: 10px !important;
  margin: 0 -10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class='container-fluid'>
  <h1 class="alert alert-danger custom-alert" role="alert">
    Preview Only, no actual changes will be made to your music files
  </h1>
  <h1 >
    Fix Songs Report 396
  </h1>
  <div>
    <h3>
      Errors and Warnings
    </h3>
    <div>

      <div class="alert alert-warning custom-alert" role="alert">
        <h5 class="alert-heading">
          Mar 23, 2019, 2:42:06 PM
        </h5>

        <p>
          Warning:Naim E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Various Artists\Pure Rock Ballads:AmgInfo.xml Track Count doesnt match No Of Songs so ignoring track metadata:Song Count 36:Track Count 19
        </p>
      </div>
    </div>
  </div>
</main>

Vertical alignment � Bootstrap, align-text-bottom , and .align-text-top as needed. With inline elements: baseline top middle bottom text-� To set the heading alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align. HTML5 do not support the align attribute of the heading tag, so the CSS style is used to set alignment.

you can try using the

<div class="container">    
<h1 class="text-center display-4"> 

the first, tag it helps center all your contents .so place the tag at the start of the body. second tag is my personal favorite header class. Its very simple and i have used it in many of my projects. hope this helps :)

Text � Bootstrap, Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. Bootstrap 4 Default Settings. Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

Typography � Bootstrap, Use the included utility classes to recreate the small secondary heading text Change text alignment, transform, style, weight, and color with our text utilities and� Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Toasts � Bootstrap, They're built with flexbox, so they're easy to align and position. To encourage extensible and predictable toasts, we recommend a header and body. <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</ small>� How to Right Align Button Using Bootstrap. For right alignment of button using bootstrap, you have to use the class .text-right on a HTML div tag for Bootstrap button right alignment. See the below example for Bootstrap align right method inside the div element.

Bootstrap Text/Typography, By default, Bootstrap will style the HTML headings ( <h1> to <h6> ) in the following way: The classes for text colors are: .text-muted , .text-primary , .text- success , .text-info , .text-warning , and .text-center, Indicates center-aligned text, Try it. Add class .heading-center to align center the heading text. If you run the above example it will produce the output something like this –.

Comments
  • Card, hmm that may be the way to go I will investigate. The html is generated by j2html java library and that has caused me to use a few more divs sometimes because i neeed to return a single tag from a methos, i,e rather than return a h1 and h3 tag i wrap in a div and return a div.
  • @PaulTaylor, I suggested card because it will always have the same padding as the alert.
  • im not totally sure about this, but seems to work better so marking as correct, thanks.
  • I can see putting the first alert beneath the first header may look better but I was thinking that maybe the headings should be within some other element so then lined up with the alerts ?
  • Colourless alert is a nice idea, but I cant help but feeling that its not a matter of taste, it just looks really bad for the text to not be aligned, which is why I think I am creating my pages incorrectly
  • Well yes I dont want to do bad practise, I want to find out how I should be constructing my pages so this is not an issue
  • I dont want to center the contet, but what does display-4 do ?