CODEWITHSUNDEEP
htmltwitter-bootstrapcss
jwdwsn
jwdwsn

Reputation: 33

Creating margins in Bootstrap

I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance. 

<div>
   <h1 class = 'text-center'> Bob Dylan </h1>
   <img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
   <h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>

<div class = 'row'>
   <div class="col-xs-2">
       <a href = "https://en.wikipedia.org/wiki/Bob_Dylan_(album)"><img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'></a>
        <p class = 'center-block'> 1962 </p>
   </div>

https://codepen.io/jwdwsn/pen/awaGdv

Upvotes: 0

Views: 62

Answers (1)

Hussain Patel
Hussain Patel

Reputation: 470

To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.

.bottom-margin { margin-bottom:30px; }

Then add a div after the quote div as below

<div class = "row bottom-margin">
   <div class = "col-md-12">
   </div>
 </div>

I tried it works.

Hope this helps.

Upvotes: 1

Related Questions