Lineheight in bootstrap

[Roopavathy]

Dear All,

How can i reduce the lineheight inbetween the lines. And also want to make it responsive. Kindly help. Screenshot attached. Thanks in advance.

<header style="height:130px;background:#38578c;font-family:fantasy;font-size:50px; " class="fixed-top">
         <div class="row ">
            <div class="col-lg-12 d-flex justify-content-center">
               <img src="images/bhc-logo.png" width="75" height="10" class="img-fluid" style="margin-right: 20px;">
               <a class="navbar-brand" href="../index.html" style="color:#fff;font-size:35px;">
                  BISHOP HEBER COLLEGE (Autonomous)
               <br> <span class="text-center" style="font-size:20px; text-align:center;margin-top: -100px;">Tiruchirappalli - 620017.</span>
               
               
               </a>
            </div>
        </div> <!-- row -->
      </header>

[L e n a]

Does this help you  https://getbootstrap.com/docs/5.0/utilities/text/#line-height ?

In your snippet you use inline style (HEADER, A, IMG…), you should create your own CSS style sheet attached to your document and use class or tag’s selector for applying those styles.

[Roopavathy]

thank you.

[Nancy OShea · Accepted solution]

<header style="height:130px;​

By @Roopavathy

=============

Header should not have an explicit height value.  Best practice is to keep container height at the default value (which is auto).

I urge you to learn Bootstrap's built-in classes.  It will save you many hours.  If you're not careful, manual coding can create problems and break Bootstrap.

See if this comes close to what you want. 

<!--CUSTOM CSS FILE-->
<style>
.bg-primary {background-color:#38578c !important;}

header h1 {
font-family:fantasy, copperplate, papyrus; 
font-size:1.5rem;
}
</style>

<!--BOOTSTRAP 4, THREE COLUMNS-->
<header class="container-fluid bg-primary text-light fixed-top">
<div class="row">

<div class="col-md-1">
<p class="p-1"><img src="images/bhc-logo.png" alt="logo" width="75" height="10" class="img-fluid"></p>
</div>

<div class="col-md-9">
<h1 class="p-1">BISHOP HEBER COLLEGE (Autonomous)</h1>
</div>

<div class="col-md-2">
<p class="p-1">Tiruchirappalli - 620017.</p>
</div>

<!--/row--></div>
<!--/container--></header>

To add more padding,  change p-1 class to another value up to p-5. 

To add margins, use m-1 through m-5 class. 

https://getbootstrap.com/docs/4.0/utilities/spacing/

Hope that helps.

[Roopavathy]

Thank you very much . It helps.

[Liam Dilley]

To aslo add - Avoid doing inline styles.