CODEWITHSUNDEEP
htmlbootstrap-4
Paul Taylor
Paul Taylor

Reputation: 13110

In Bootstrap how do I align Heading text with Alert text

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>

screenshot showing problem

Upvotes: 1

Views: 1369

Answers (4)

NicuVlad
NicuVlad

Reputation: 2601

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>

PS: Why do you use so many empty div tags?

PSS: please remove this: style="border:0 if you want to keep the border for the card

Upvotes: 3

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

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>

Upvotes: 0

P. Grote
P. Grote

Reputation: 249

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>

Upvotes: 1

Jaidude
Jaidude

Reputation: 9

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

Upvotes: -1

Related Questions