Bootstrap padding left and right is not working-CodePudding

I am learning bootstrap and today I wan working with margins and padding but dealing with these I am facing a weird behaviour of bootstrap whenever I apply overall padding or padding top or padding bottom it works perfectly fine but when I apply padding left or padding right it does,nt affect the page at all and exact same is the case with margin left and margin right can anyone assist me in this regard thanks:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="Bootstrap/bootstrap.css">
  <title>Document</title>
  <style>
    .container{border: 4px solid #000;}
    .row{border: 3px solid indianred;}
    .pink{background: lightpink;}
    .orange{background: orange;}
    .cyan{background: cyan;}
    .blue{background: lightblue;}
    .col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{border: 2px solid blue;}
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-6 p-5 orange">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ex magni soluta, odio sed nihil.
    </div>
    <div class="col-4 pl-5 blue">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, quos. ipsum dolor sit amet, consectetur adipisicing elit. Beatae, alias.
    </div>
  </div>
</div>
</body>
</html>

CodePudding user response：

I am not using older version currently I am using latest version I have not included bootstrap js file probably is it causing problem?
– Ayan

The latest version is v5.1.1, you can see how the notation of spacing utility classes has changed in the currents docs.

This is a CSS issue and not affected by the inclusion or exclusion of the bootstrap.js

Basically l & r (left/right) have been abandoned in favor of s & e (start/end) in order to support Right-to-left text direction. So s & e will flip between left and right depending on text direction being LTR or RTL. They changed every reference to l/r and left/right to s/e and start/end respectively, all throughout the framework.

CodePudding user response：

In bootstrap you need to use the classes for left and right as ml for margin left & mr for margin right. Same this applies to padding. For instance here I've applied margin left to your code and it worked, Please check & do adjustments accordingly:

<div class="col-6 p-5 ml-5 orange">