Clever Geek Handbook

<p> </p> issue in Bootstrap 4, HTML and CSS

I am trying to have multiple p tags in a section, but the paragraphs are not separated and are just grouped together. The applicable code looks like this:

<div class="row">
    <div class="col-md-12 d-flex justify-content-center padding-top">
        <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
        <p>Test</p>
    </div>
</div>

and the link to the code is https://www.codeply.com/go/cJ37oz9g4Q . If you go by code then you will see that "Test" appears right after the word "REFUNDS". I've tried modifying the code, looking for known issues, etc.

How can I fix this?

+3


source to share


2 answers


You need to remove the class d-flex

from this code:



<div class="col-md-12 justify-content-center padding-top">
  <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
  <p>Test</p>
</div>
+2


source


This is because of the class d-flex

- it forces the <p>

items to become flex and by default they are aligned along the horizontal axis. Replace d-flex

and justify-content-center

withtext-center 



.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
    background: #4060A5;
}

.social .fa-twitter:hover {
    background: #00ABE3;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}

p {
    color: #FFF;
}

.paddding-top {
    padding-bottom: 15px;
    padding-top: 18px;
    border-bottom: 1px solid white;
}

/*this is the padding for the form from the top*/

.padding-form-top{
    padding-top: 18px;
}
      

        
        
        
      

    
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="bg-inverse">
    <div class="row">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="social">
                <ul>
                    <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <hr>
    
    <div class="row">
        <div class="col-md-12 text-center padding-top">
            <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
            <p>Test</p>
        </div>
    </div>
    
    <hr>
    
    <div class="row">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="col-md-4 col-md-offset-4 text-center padding-form-top">
                <form class="form-width">
                    <div class="form-group">
                        <input type="email" class="form-control" id="email" placeholder="Your Email Address">
                    </div>
                    <button type="submit" class="btn btn-success">Sign Up for the Latest Updates</button>
                </form>
            </div>
        </div>
    </div>
</footer>
Run code


0


source






More articles:


All Articles