Geek Answers Handbook

How to reduce the distance between lines designed with bootstrapping

I am using bootstrap grid system, I need to reduce line spacing, line spacing is too large, how can I reduce it. Please help. Thanks..

<div class="row"> <div class="col-md-6"> <h1 id="Heading"> Heading </h1> <div class="row" style="margin-left:6px;"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> </div> </div> </div> </div> </div> <div>
+6
source share
4 answers

There are 2 quick solutions for this:

  • Editing bootstrap core css / sass, which would be a bad idea, as it will affect the basic functionality of the scaffolding page.
  • Write a separate class and add it to your ex div:

.row-bottom-margin {margin-bottom: 20px; }

and you can use it as

 <div class="row row-bottom-margin">

Option 1 is not proposed until you really want this change to be applied in all relevant places and to consider your future projects.

Hope this helps!

+8
source

Twitter bootstap has a default margin-bottom: a 15px property set between grid lines. You can remove this property or overwrite the margin property

  <div class= "row marginRow"></div> Your Css .marginRow{ margin-bottom:0px !important; }

or just delete all available fields with

  .marginRow{ margin:0px !important; }
0
source

Using Bootstrap 4, you no longer need to use CSS for this, since utility classes are for this purpose.

0
source

By default, line items expand based on their children. So your problem is not in the .row class, but in #rect

In the direct element, you have the line height 1.4 by default bootstrap css. Make it a class, not an id.

You can reduce it to 1.2 for your case ... Do this in a separate css file and overwrite it. That would be best for you.

  .rect { line-height: 1.2; // overwrite it on a different css if you prefer }
-1
source

More articles:


All Articles