Issue with <p></p> in Bootstrap 4, HTML, and CSS

Question

I try to have multiple p tags in a division, but the paragraphs aren't separating and are just bunching together. The applicable code is as follows:

<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 codeply is https://www.codeply.com/go/cJ37oz9g4Q. If you go to codeply, then you'll see that "Test" appears immediately after the word "REFUNDS". I have tried modifying the code, looking for known issues, etc.

How can I fix this?

Answer 1

This is because of d-flex class - it forces <p> to become flex-items and by default they align themself along horizontal axis. Replace d-flex and justify-content-center with text-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>

Answer 2

You need to remove d-flex class 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>