Known Participant

Answered

Lineheight in bootstrap

Forum|Forum|3 years ago
August 3, 2022
3 replies
590 views

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>

This topic has been closed for replies.

Correct answer Nancy OShea

<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.

Liam Dilley

Inspiring

To aslo add - Avoid doing inline styles.

Nancy OShea

Correct answer

Community Expert

<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.

Nancy O'Shea— Product User & Community Expert

RoopavathyAuthor

Known Participant

Thank you very much . It helps.

L

L e n a

Community Expert

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.

RoopavathyAuthor

Known Participant

thank you.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded