CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RS92
RS92

Reputation: 485

How to add padding between paragraph and list

In my footer I have breadcrumb list and under that is some text.

My question then is how to set the padding between the breadcrumb list and the Copyright paragraph.

I solved this using <br> tag, but I think it's not semantically correct.

I tried with padding-top but without success.

.col-xs-12 .breadcrumb{
    	background-color: #2b2b2b;
    }
    .breadcrumb > li + li:before {
      content: none;
    }
    .breadcrumb li a    {
        color: white;
        font-family: TW Cen MT;
    	font-size:17px;
    }
    .container-fluid  p{
    
      bottom: 0;
      position: absolute;
      margin-left: 34em;
    }
<div class="container-fluid footer">
        <div class="row">
            <div class="col-xs-12">
                
                <img src="img/Gallery/fb.png" alt=""> &nbsp
                <img src="img/Gallery/twitter.png" alt=""> &nbsp
                <img src="img/Gallery/youtube.png" alt=""> &nbsp
                <img src="img/Gallery/myspace.png" alt="">
    
                <ol class="breadcrumb">
                <li><a class="active">Home</a></li>  &nbsp
                <li><a href="#">Gallery</a></li>  &nbsp
                <li> <a href="#">FAQ</a></li>   &nbsp
                <li> <a href="#">Contact</a></li>
                </ol>
    
                <p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  All Right Reserved | Testing Website </small></p>
            </div>
    </div>

Upvotes: 0

Views: 92

Answers (3)

L-HAZAM
L-HAZAM

Reputation: 84

The solution is to add a margin-bottom:; to the list (.breadcrumb), and please remove the properties 

.container-fluid  p{
    bottom: 0;
    position: absolute;
    margin-left: 34em;
}

you won't need them anymore.

Upvotes: 0

Bluety
Bluety

Reputation: 1909

Your paragraph is positionned in absolute, it's out the flow.

1st solution Remove absolute positionning.

2nd solution Add a padding-bottom in your list. The size of padding correspond to the height of the paragraph and the margin you want.

Like so:

.breadcrumb {
    padding-bottom: 50px; // 20px height paragraph, 30px height margin
}

Upvotes: 0

Rajinikanth
Rajinikanth

Reputation: 359

Set a margin-bottom to the ordered list, like so:

.breadcrumb {
    margin-bottom: 50px;
}

Upvotes: 3

Related Questions