Question 299624 in Html Question posted in
Some basic documentation can be found here.

Html – Why isn't padding working in my Bootstrap 5.3 page?

Why is pe-5 not working?

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <header class="bg-info">
    <div class="row text-white">
      <div class="col-md-6 p-4 pe-5 ">
        <h2 class="">Adhnan M Y</h2>
      </div>
      <div class="col-md-6">
      </div>
    </div>
  </header>
</body>
Tags:

2

Answers


  1. 0

    Maybe because you are using: general padding with p-4 and then specific padding with pe-5

    Login or Signup to reply.
  2. 0

    You don’t have the required .container or .container-fluid class on an element around your row, so the row’s spacing causes horizontal page overflow. This could give the impression that your padding doesn’t exist or is smaller than expected.

    I’ve added a container class and background color to the heading to demonstrate that it does.

    https://getbootstrap.com/docs/5.3/layout/grid/#example

    h2 {
  background: pink;
}
    <head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <header class="container-fluid bg-info">
    <div class="row text-white">
      <div class="col-md-6 p-4 pe-5 ">
        <h2 class="">Adhnan M Y</h2>
      </div>
      
      <div class="col-md-6"></div>
    </div>
  </header>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search