Bootstrap - empty lines between content

Question

I want to add empty spaces between text content in correct way (without using nbsp) to look like on image, how can I do that?

image

Index.html

    <div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">
               <h1>Text A</h1>
               <h1>Text B</h1>
               <h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1>
               <h1>Text after space</h1>
               <h1>&nbsp;</h1>
               <h1>&nbsp;</h1>
               <h1>Example</h1>
               <h1>Second examplei</h1>
        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS

h1{
margin: 0px;
padding: 1px 0;
line-height:1;
font-size: 28px;}

Please look at the css property `margin` and play with it :) also suggest to read [margin vs padding](http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css) to know the difference. Take the time to learn, goodluck! — nkmol, Mar 02 '16 at 12:50

score 3 · Answer 1 · answered Mar 02 '16 at 12:46

3

You could solve it with some simple css padding

Working Codepen Example

 .spacer {
     padding-top: 80px;
     padding-bottom: 40px
 }

Cheers :)

answered Mar 02 '16 at 12:46

Marc Hjorth

1,508
2
14
22

score 1 · Answer 2 · answered Mar 02 '16 at 12:47

1

Please use padding css property. Padding-top:""; padding-bottom:""; would be fine.

answered Mar 02 '16 at 12:47

Fazil Abdulkhadar

1,017
5
11

score 0 · Answer 3 · answered Mar 02 '16 at 12:46

0

.space { margin:0; padding:0; height:50px; } // height as desired

<div class="space"></div>

You can replace this code instead of <h1> </h1>

answered Mar 02 '16 at 12:46

Sharon

44
2

Bootstrap - empty lines between content

3 Answers3