How to change br line height inside bootstrap .col

Question

I was looking for changing br size between paragraphs.I found many thing but many of them didn't work.I didn't understand why.In the example below I added
tag to seperate my paragraph.But that space is too for me.I tried but didn't change that spcae height.I don't know how else I can make it more less.On the picture you can see

Here what I tried below

<div class=" container shadow p-3 mb-5 bg-white rounded centered" style="margin-top:50px;">

    <div class="container">
      <!-- Control the column width, and how they should appear on different devices -->
      <div class="row">
        <div class="col-sm-6" style="background-color:yellow;">
        <div class="row">
              <div class="col-sm-12" style="background-color:yellow;">
                <h4 style="display:inline">Language:</h4>
                <mat-form-field style="margin-left:10px;">
                    <mat-select>
                      <mat-option *ngFor="let lang of languages" [value]="lang.value">
                        {{lang.viewValue}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
              <h4>Company Size</h4>
              <div>
                Number of Computers:
                <mat-form-field>
                  <input type="number" matInput placeholder="" ngModel name="number" #numCows="ngModel">
                </mat-form-field>
              </div>
              <div>
                Number of computers necessary
                <br style="line-height:20%">
                needed per year:
                <mat-form-field>
                  <input type="number" matInput placeholder="" ngModel name="number" #numCalves="ngModel">
                </mat-form-field>
              </div>
              </div>
        </div>
        <div class="col-sm-6" style="background-color:orange;">
        </div>

        </div>
      </div>
  </div>

Possible duplicate of [How to change the height of a
?](https://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br) — APAD1, Sep 30 '19 at 20:17
@TimuçinÇiçek put that inside a div and wrap it in the next line — Aravind, Sep 30 '19 at 20:23

score 0 · Answer 1 · answered Sep 30 '19 at 20:29

0

Here it is,

Number of computers necessary
       <span style="display:block">
              needed per year:

You can increase the space by using margin-top: 2px; or what ever number

Updated Stackblitz

answered Sep 30 '19 at 20:29

Aravind

40,391
16
91
110

good solution but when I add a new paragraph under of it,still there's a gap between that paragraph here it is : https://stackblitz.com/edit/angular-tnkhfp-3vfu9q?file=app/form-field-overview-example.html – Timuçin Çiçek Sep 30 '19 at 21:12

sallf · Answer 2 · 2019-09-30T20:38:47.520

This would work and be more inline with the code you already have.

<div style="margin-bottom: 30px">
  Number of computers necessary
</div>
<div>
  needed per year:
  <mat-form-field>
    <input type="number" matInput placeholder="" ngModel name="number" #numCalves="ngModel" />
  </mat-form-field>
</div>

Another option would be to wrap it in a <p> and adjust the line-height. This option would be better for accessibility since you aren't splitting a sentence up for the purposes of formatting.

<p style="line-height: 30px">
  Number of computers necessary
  <br />
  needed per year:
  <mat-form-field>
    <input type="number" matInput placeholder="" ngModel name="number" #numCalves="ngModel" />
  </mat-form-field>
</p>

score -1 · Answer 3 · answered Sep 30 '19 at 20:23

-1

You can specify the height of an <br> element if you really want to like this, for example:

<br style="height:30px" />

Or like @Suyash said, and what most people would do I think is just add some margin or padding above or below it until it looks how you want it to look.

answered Sep 30 '19 at 20:23

Jay

258
2
6
16

Specifying a `height` on a `br` will not change it's height – APAD1 Sep 30 '19 at 20:25

How to change br line height inside bootstrap .col

3 Answers3