CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4twitter-bootstrap-3
Ayan
Ayan

Reputation: 181

Bootstrap padding left and right is not working

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>

`

Upvotes: 14

Views: 22166

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10897

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.

Upvotes: 54

Related Questions