The challenge of using <p></p> tags with Bootstrap 4, HTML, and CSS

Having trouble separating multiple paragraphs within a division? Let's take a look at the code snippet in question:

<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>

You can browse the codeply link for a visual representation here: . As you'll notice, the paragraph "Test" is not separated and appears right after "REFUNDS". Troubleshooting this issue may involve modifying the code or identifying any known issues.

Need assistance on how to fix this? Let's find a solution together!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To resolve the issue, please eliminate the d-flex class from the following section of code:

<div class="col-md-12 justify-content-center padding-top">
  <p>IMPORTANT DISCLAIMER ABOUT LEGAL ISSUES IN TESTIMONIALS, RISKS, TYPICAL RESULTS, AND REFUNDS</p>
  <p>Test</p>
</div>

Answer №2

This issue arises due to the d-flex class, which transforms the <p> elements into flex-items and automatically aligns them along the horizontal axis. To fix this, 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;
}

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to eliminate the checkbox attribute when using jQuery's clone function

When I try to add a new row using my script code and HTML, the property of the last checkbox is automatically selected if it is checked. In the new row, a checkbox with a check is added, but I want to remove the checkbox when it's checked in the new r ...

jqueryhtml

Material-UI elements and reactJS components often clash with one another

I am currently working with a combination of Meterial-UI, ReactJS, and Bootstrap to manage the grid layout on my project. However, I've encountered an issue with material-ui where I'm trying to display 4 text-fields in a single row. Despite my ef ...

twitter-bootstrapreactjsmaterial-designmaterial-ui

Ways to update the title of a Magento widget

I've added a widget to showcase new products on my Home page and it's displaying perfectly. However, I want to get rid of the title "New Product" that comes with it. This pesky little thing needs to go! https://i.sstatic.net/P0NeS.jpg I'm ...

cssmagentomagento-1.9

How can I display data saved from step 2 in a multi-step form with 4 steps, when I return from step 3 to step 2?

Let's consider this scenario: Imagine the user is at step 2 and types their name into <input type="text" class="form-control input-xl" ngModel name="firstName"> They proceed to step 3 but then decide to return to step 2. The information entere ...

htmlangularjsangular

I'm encountering an issue where the script located at 'http://localhost:3000/js/dashboard/dashboard.js' is not being executed due to its MIME type being 'text/plain' and not executable

When I include my JavaScript code within the HTML file using <script>, everything works fine. However, I am now attempting to move my JavaScript code outside of the ejs(HTML) file. I have created a new js file and placed my JavaScript code inside ...

htmlexpressbrowserejs

What techniques can be used to maintain the alignment of an image while the surrounding text changes?

Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute&ap ...

htmlreactjstwitter-bootstrapcssbootstrap-4

What is the best way to ensure proper alignment of elements in a React application?

Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To ach ...

htmlcssreactjsantd

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...

javascriptcssreactjstooltipantd

What is the method for inserting line breaks in Ionic2 toasts using HTML?

Is there a way to include new lines and other HTML tags in a toast message? let toast = this.toastCtrl.create({ message: "First line<br />Second line.", duration: 5000, dismissOnPageChange: true }); toast.present( ...

htmlangulartypescriptionic2toast

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

javascripthtmlcss

Dragging and dropping elements on the HTML Canvas with the added feature of snap functionality

I have implemented a drag-and-drop circle feature inside an HTML canvas with the following code: var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); width = c.width = window.innerWidth * 0.9; height = c.height ...

javascripthtmlhtml5-canvas

CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...

htmlcss

Adding ngx-bootstrap with the ng add command

Currently working with angular 8 and attempting to add ngx bootstrap using the command ng add ngx-bootstrap. However, upon running the command, the following error message appears in the console output: Added "bootstrap Added "ngx-bootstrap ...

twitter-bootstrapnpmangular-clingx-bootstrap

Adjusting Text Width in fabric.js: A How-To Guide

In my experience, I have found that setting textAlign for a fabric.js Text object seems to be ineffective because the textfield's width is automatically adjusted to fit the text perfectly. I searched through the API but couldn't find any way to ...

javascriptjqueryhtmlfabricjstext-alignment

Improving Modal Closure on Form Submission Suggestions

Seeking Assistance with Modal Closure After Form Submission I understand that this inquiry may have been posed by someone else before, but I require guidance specifically for my code pertaining to handling form submission with AJAX. As a newcomer to AJAX, ...

phphtmljqueryajax

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

What is the best method for adding a table header that spans across the first two columns?

Here is a link that I would like you to look at: jsfiddle.net/hTRQJ/ <table class="table table-bordered table-striped"><thead> <tr> <th colpan=""> Checkin </th> ...

htmlhtml-table

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...

cssangulartypescript

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

javascriptjqueryhtmlcss

The Boostrap-5 carousel seems to be malfunctioning and not functioning correctly

I've been teaching myself how to construct websites using tutorials and other resources. I'm currently diving into the world of Bootstrap, but I'm having trouble with the carousel feature. No matter how much I try, the slides get stuck on th ...

htmlxcodeperformancecarouselbootstrap-5