Why is text overlapping padding in Bootstrap 4? What can be done to prevent this issue?

I've set up a basic bs4 layout where the left-menu is represented by 

<div class="col-md-2">
, the center-main-content by 
<div class="col-md-6">
, and the right-menu by 
<div class="col-md-4">
. Using Chrome dev-tool, you can see that there is adequate space between the left-menu and the center-main-content, but not between the center-main-content and the right-menu. https://i.sstatic.net/0qcOT.png

Upon further inspection, I noticed that text was intruding into the padding. Take a look at the text overlapping with the padding (green) below;

https://i.sstatic.net/6TCKd.png

...and upon closer examination, I even found this text encroaching on the padding too;

How can I prevent this from happening? I want to have proper padding or margin between the columns. Here's a quick peek at my markup

This is the minimal code snippet for the setup;

<html lang="en">
<head>
<title>New Post!Admin Area</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>
  <main role="main">
    <div class="container-fluid">
        <div class="row">
         
            <!-- left menu -->
            <div class="col-md-2">

                <div id="accordion" class="accordion">
    
                    <!-- content // collapseOne-->
                    <div class="card cardmargin">
                        <div class="card-header">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            <span class="fas fa-cloud"></span>Content</a>
                        </div>
                    
                        <div id="collapseOne" class="collapse" data-parent="#accordion">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span class="fas fa-pencil-alt"></span><a href="http://www.jquery2dotnet.com">Articles</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-newspaper"></span><a href="http://www.jquery2dotnet.com">News</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">Comments</a>
                                            <span class="badge badge-dark">42</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                  

                </div>
  
            
            </div>
    
            <!-- center-main-content -->
            <div class="col-md-6">
                
                <div class="row">
                    <h2>Some Title</h2>
                </div>
                                    
                <div class="row">  
                    Some Category
                </div>
                                
                <div class="row">
                    <p>It is a long established fact that a reader will be 
                    distracted by the readable content of a page when looking 
                    at its layout. The point of using Lorem Ipsum is that it 
                    has a more-or-less normal distribution of letters, as 
                    opposed to using &#39;Content here, content here&#39;, 
                    making it look like readable English. Many desktop 
                    publishing packages and web page editors now use Lorem 
                    Ipsum as their default model text, and a search for &#39;
                    lorem ipsum&#39; will uncover many web sites still in their 
                    infancy. Various versions have evolved over the years, 
                    sometimes by accident, sometimes on purpose (injected 
                    humour and the like).</p>
                    <p>It is a long established fact that a reader will be 
                    distracted by the readable content of a page when looking 
                    at its layout. The point of using Lorem Ipsum is that it 
                    has a more-or-less normal distribution of letters, as 
                    opposed to using &#39;Content here, content here&#39;, 
                    making it look like readable English. Many desktop 
                    publishing packages and web page editors now use Lorem 
                    Ipsum as their default model text, and a search for &#39;
                    lorem ipsum&#39; will uncover many web sites still in their 
                    infancy. Various versions have evolved over the years, 
                    sometimes by accident, sometimes on purpose (injected 
                    humour and the like).</p>
                </div>
                
            
            </div>  
            
            <!-- right-menu -->
            <div class="col-md-4">
                
                </br>
                
                <!-- created -->
                <div class="row">
                    <h5>Created:</h5>
                </div>
                <div class="row">
                    2021-06-12 06:26:23            
                </div>
                    
                </br>
                
                <!-- updated -->
                <div class="row">
                    <h5>Updated:</h5>
                </div>
                <div class="row">
                    2021-06-12 06:26:23            
                </div>
                
                </br>
                
                <!-- Author -->
                <div class="row">
                    <h5>Author:</h5>
                </div>
                <div class="row">
                    mainuser            
                </div>
                
                </br>
                
                <!-- publised -->
                <div class="row">
                    <h5>Published?</h5>
                </div>
                <div class="row">
                    No            
                </div>
                
                </br>
                 
                <!-- featured image --> 
                <div class="row">
                    <h5>Featured Image</h5>
                </div>
                <div class="row">
                    <img src="https://development.example.com/filemanager_files/thumbs/no-image.jpg" >
                </div>
                
            
            </div>
            
       </div>
    </div> <!-- /container -->  
    <hr>
</main>

<footer class="container">
  <p>&copy; example.com 1999-2021 || Phone:  +81-555-5555-5555      || Fax:  +81-555-5555-5555|| Email:  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf2f5fdf4dbfee3faf6ebf7feb5f8f4f6">[email protected]</a>      </p>
</footer>
csstwitter-bootstrapbootstrap-4

Answer №1

Your content is currently structured in rows without columns, but you can streamline this by eliminating the unnecessary rows.

When using Bootstrap, the typical structure involves a container, followed by a row, then a column, and finally your content.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272061c041c02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<section role="main">
    <div class="container-fluid">
        <div class="row">

            <!-- left menu -->
            <div class="col-md-2">

                <div id="accordion" class="accordion">

                    <!-- content // collapseOne-->
                    <div class="card cardmargin">
                        <div class="card-header">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <span class="fas fa-cloud"></span>Content</a>
                        </div>

                        <div id="collapseOne" class="collapse" data-parent="#accordion">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span class="fas fa-pencil-alt"></span><a href="http://www.jquery2dotnet.com">Articles</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-newspaper"></span><a href="http://www.jquery2dotnet.com">News</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">Comments</a>
                                            <span class="badge badge-dark">42</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>


                </div>


            </div>

            <!-- center-main-content -->
            <div class="col-md-6">
                <h2>Some Title</h2> Some Category <p>It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking
                    at its layout. The point of using Lorem Ipsum is that it
                    has a more-or-less normal distribution of letters, as
                    opposed to using &#39;Content here, content here&#39;,
                    making it look like readable English. Many desktop
                    publishing packages and web page editors now use Lorem
                    Ipsum as their default model text, and a search for &#39;
                    lorem ipsum&#39; will uncover many web sites still in their
                    infancy. Various versions have evolved over the years,
                    sometimes by accident, sometimes on purpose (injected
                    humour and the like).</p>
                <p>It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking
                    at its layout. The point of using Lorem Ipsum is that it
                    has a more-or-less normal distribution of letters, as
                    opposed to using &#39;Content here, content here&#39;,
                    making it look like readable English. Many desktop
                    publishing packages and web page editors now use Lorem
                    Ipsum as their default model text, and a search for &#39;
                    lorem ipsum&#39; will uncover many web sites still in their
                    infancy. Various versions have evolved over the years,
                    sometimes by accident, sometimes on purpose (injected
                    humour and the like).</p>
            </div>

            <!-- right-menu -->
            <div class="col-md-4">

                <!-- created -->
                <h5>Created:</h5>
                <p>2021-06-12 06:26:23</p>

                <!-- updated -->
                <h5>Updated:</h5>
                <p>2021-06-12 06:26:23</p>

                <!-- Author -->
                <h5>Author:</h5>
                <p>mainuser</p>

                <!-- publised -->
                <h5>Published?</h5>
                <p>No</p>

                <!-- featured image -->
                <h5>Featured Image</h5>
                <img class="img-fluid" alt="Placeholder" src="https://via.placeholder.com/360x240.png">

            </div>

        </div>
    </div> <!-- /container -->
    <hr>
</section>

<footer class="container">
    <p>&copy; example.com 1999-2021 || Phone: +81-555-5555-5555 || Fax: +81-555-5555-5555|| Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e171018113e1b061f130e121b501d1113">[email protected]</a> </p>
</footer>

Answer №2

To address the issue, include margin to the rows on the right side within 

<div class="row ml-2">
. Here is the corrected code snippet:

<!DOCTYPE html>

<html lang="en">
<head>
<title>New Post!Admin Area</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eaf2ec">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  </head>

  <body>
  <main role="main">
    <div class="container-fluid">
        <div class="row">
         
            <!-- left menu -->
            <div class="col-md-2">

                <div id="accordion" class="accordion">
    
                    <!-- content // collapseOne-->
                    <div class="card">
                        <div class="card-header">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            <span class="fas fa-cloud"></span>Content</a>
                        </div>
                    
                        <div id="collapseOne" class="collapse" data-parent="#accordion">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span class="fas fa-pencil-alt"></span><a href="http://www.jquery2dotnet.com">Articles</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-newspaper"></span><a href="http://www.jquery2dotnet.com">News</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">Comments</a>
                                            <span class="badge badge-dark">42</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                  

                </div>
  
            
            </div>
    
            <!-- center-main-content -->
            <div class="col-md-6">
                
                <div class="row">
                    <h2>Some Title</h2>
                </div>
                                    
                <div class="row">  
                    Some Category
                </div>
                                
                <div class="row">
                    <p>It is a long established fact that a reader will be 
                    distracted by the readable content of a page when looking 
                    at its layout...

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

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

I've been working on creating an SVG map of the US, and I'm almost finished. The final step involves implementing a simple if-else statement to prompt users for the name of the state when they click on it. My goal is to fill the state green if th ...

javascriptjquerycsssvg

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss

Implementing a different background image for every menu item when hovering over its parent

I am trying to figure out how to achieve this. My menu is placed in a container that is 500px high, with a background image. I would like the background image to change when hovering over a parent menu item. I believed I could do this using something like: ...

javascriptjqueryhtmlcss

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Currently in the process of combining multiple Material UI components for rendering. The code I have so far is: export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore))); This setup is functioning as expected. ...

javascriptcssreactjsreduxmaterial-ui

Collecting data with Selenium as elements load [Python]

Is there a way to scrape only the newly generated items in sequence? I have a dynamic list that loads with scrolling. There are two methods I can use to scrape all generated divs: Scroll to the bottom of the list and then scrape all generated divs. Scroll ...

pythoncsspython-3.xselenium-webdriverweb-scraping

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

javascripthtmlcss

"Troubleshooting: Why Won't My Entire Div Display on the

Struggling with a website rebuild due to my limited knowledge of HTML/CSS. For some reason, this whole div section isn't showing up as it should. Here is the problematic div: <div class="container clearfix"> <div class="border-shade sli ...

htmlcss

I am having trouble setting a component to show up as inline-block in Angular2

Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear sta ...

cssangular

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

What is the specific use of the second app.css file in Laravel?

I'm currently delving into Laravel 8, and I'm perplexed by the role of Resources\css\app.css. While every other component in the Resources directory serves a clear function, the app.css file appears to be empty. Even when I attempt to a ...

phpcsslaravelnpmnpm-run

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

htmlcss

Extending the length of the list items and their contents

Take a look at this website. I'm struggling with expanding the submenu list items in IE7. It seems that when you hover over one of the LIs under Restaurants, the green does not fill the entire line. I attempted using {width: 100%}, but it did not sol ...

htmlcsswidth

Hover over the Div element for inline effect

Hello all, I am currently working on running a while loop from a database to show different records. The twist is that these records are displayed as images, which makes it tricky to customize using standard CSS. To work around this, I'm implementing ...

phphtmlcss

What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...

javascripthtmlcssuinavigationbar

Having trouble getting my CSS gradient animation to work

I'm experimenting with creating a dynamic CSS gradient background effect. I'm using a tool to generate the CSS for the gradient, which can be found at this page: Here is the CSS code snippet: body { background: linear-gradient(270deg, #18f0b8, ...

htmlcssgradient

I am looking to create a side menu that will allow for dynamic class changes upon clicking

I'm looking to create a dynamic side menu that changes class on click event. My goal is to have jQuery add a class to a clicked "li" element that doesn't already have the class "active", while removing the class from other "li" elements. I want ...

javascriptcssasp.net-mvcjquery-uibootstrap-4

How to Customize the Menu Style in Your WordPress Theme

As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...

csswordpressmenuthemes

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

Despite utilizing overflow and wrap properties, HTML lists still fail to display horizontally

Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder. The issue at hand is that the li elements are not displaying horizontally as intended; they n ...

javascriptjqueryhtmlcss