Jumbotron alignment issue: centering problem

After implementing the jumbotron feature in the latest version of Bootstrap 4.5.2, I encountered an issue with centering a <p> tag within three columns. Despite my efforts to adjust the padding, the space on the right side of the last column appears smaller than the space on the left side of the first column, indicating that it is not perfectly centered.

.jumbotron {
  background: black;
  color: white;
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <div class="row">
      <div class="col">
        <p>
          Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
        </p>
      </div>
      <div class="col">
        <p>
          Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
        </p>
      </div>
      <div class="col">
        <p>
          Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
        </p>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

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

Don't forget to keep track of the number of tabs in AngularJS

In my mobile application, I am utilizing AngularJS to allow users to add products to their orders. Different tabs are used so that users can switch between categories, with the corresponding products displayed for each category. Users can add these product ...

javascripthtmlangularjs

Navigation menu consist of two horizontal rows

I'm facing a challenge. I have a total of 8 links (one being a button) on a navigation menu that I need to display in two rows on the right side. I'm having difficulty aligning them properly while also justifying them to the right. Essentially, t ...

htmlbootstrap-4

adding labels to d3 elements without nesting

I need help creating HTML with tooltips and tooltip text for each <p> tag. While I know this can be achieved using d3, I am currently using a CSS approach because it feels more familiar to me. In an ideal scenario, the desired HTML output should res ...

javascripthtmlcssd3.js

Implementing a Bootstrap bottom popover when an image is clicked using JavaScript

Does anyone know how to display a Bootstrap bottom pophover when an image button is clicked using JavaScript? Appreciate any help! ...

javascriptcssangularjstwitter-bootstrap

"Enhance your website's user experience with the ability to zoom in and out

One issue I encountered on my website was that when I included an iframe, the map would zoom in and out while scrolling. To try to fix this, I set pointer-events to none. However, this caused all actions on the map to be disabled, making it impossible to n ...

htmlcssiframe

Having trouble retrieving files in a Django template

When attempting to download a file from a local directory within a Django template, I encounter an issue. Once I click on the download link, the file explorer opens for me to choose a folder, but when I go to save the file, I receive a File Not Found error ...

pythonhtmldjango

Changing the way in which text is selected and copied from a webpage with visible white space modifications

After working on developing an HTML parser and formatter, I have implemented a new feature that allows whitespace to be rendered visible by replacing spaces with middle dot (·) characters and adding arrows for tabs and newlines. https://i.sstatic.net/qW8 ...

javascripthtmltypescriptparsingclipboard

JavaScript does not react to a hyperlink being hovered over

As I delve into the world of Javascript, I have a seemingly basic question. I created a simple program where I am aiming to display the text message "You clicked on me, stop it!" when hovering over the hyperlink "Click Me". Can you help me figure out what ...

javascripthtml

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

css

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

jquerycss

Is there a way to streamline the process of uploading an image and storing its details in a single HTML form with just one submit button?

Here is the code snippet I have: <form id="registration_form" action="AddProductServlet" method="post"> <div> <label> <input placeholder="Product ID" name="pid" type="text"> ...

javahtmlformsjspservlets

Displaying the output/feedback of a PHP file being executed when the webpage loads

I'm embarking on my journey to create my very first website, and I must admit that I am feeling lost at the moment. Here's where I stand: I have a MySQL database with a table, and there's a PHP file named database.php that retrieves data fro ...

phphtmlmysqlajaxecho

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Currently, I am facing a challenge to enable users to view a PDF on a webpage without allowing them to download or print the document. Despite attempting different solutions like Iframe, embed, PDF security settings, and Adobe JavaScript, I have not been s ...

javascripthtmlpdfiframeembed

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

Navigating to a specific page based on the selected option is the key to efficient web browsing

I'm currently working on a form development project and I'm looking for guidance on how to navigate to different pages based on the selection made in a radio button. Here's the current form setup with two radio buttons: .sh_k .sh_sl { ...

javascripthtmlcssradio-button

Unintroduced jQuery Keyup

I am currently working on a project where I am trying to incorporate an autocomplete feature into an input form. My approach involves using jQuery to trigger an AJAX call to a servlet and adding a listener on the input field for keyup events. However, it s ...

javascriptjqueryhtmlajaxservlets

Obtaining the API for a website's functionalities

I’m in need of downloading the API file that facilitates the connection between the website and database. How can I achieve this? I've attempted to use Httrack, wget, and open explorer, but they only seem to download the website itself. While I get ...

phphtmlweb-scraping

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Unique Google Maps API V3 PEGMAN Customization

Can custom zoom controls and Pegman controls be styled with the same design? To add custom zoom controls, follow the instructions provided in this question's answer: <!DOCTYPE html> <html> <head> <meta name="viewport" cont ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Achieving vertical alignment of footer contents using CSS

https://i.sstatic.net/0qVgh.png This image illustrates my issue. I am attempting to align both the copyright text and my Font Awesome icons vertically. Below is my HTML code: <footer> <p>Copyright &copy; 2016 Sample SIte</p> <di ...

htmlcss