• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Lineheight in bootstrap

Contributor ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

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>

 

Views

157

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 03, 2022 Aug 03, 2022
quote
<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-fami
...

Votes

Translate

Translate
Community Expert ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

LATEST

thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

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

 

image.png

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

Thank you very much . It helps.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

To aslo add - Avoid doing inline styles.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines