CODEWITHSUNDEEP
cssbootstrap-4
Mark
Mark

Reputation: 49

How to remove extra padding right in bootstrap

enter image description hereHow can I remove the extra space in the right side of the container?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-75 mx-auto p-3 my-3 bg-dark">
  <button class="w-50 p-3 my-2">GENERAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">TRUST FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">SPECIAL EDUCATIONAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- INDIVIDUAL</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- CORPORATION</button><button class="w-25 p-3 mx-2">REPORT</button>
</div>

Upvotes: 1

Views: 357

Answers (2)

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

Simple you can do like this...

.container{
  margin:auto;
  text-align:center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-100 mx-auto p-3 my-3 bg-dark">
  <button class="w-50 p-3 my-2">GENERAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">TRUST FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">SPECIAL EDUCATIONAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- INDIVIDUAL</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- CORPORATION</button><button class="w-25 p-3 mx-2">REPORT</button>
</div>

Upvotes: -1

Always Helping
Always Helping

Reputation: 14570

Bootstrap have a lot of native classes you can. No need to add use <br>

Also to remove padding just wrap your buttons in a div and give a class d-flex and w-50 to each button

You can add margin(space) between buttons as you wish to.

Run snippet below.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container w-75 mx-auto p-3 my-3 bg-dark">

  <div class="d-flex justify-content-between">
    <button class="w-75">GENERAL FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">TRUST FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">SPECIAL EDUCATIONAL FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">CTC- INDIVIDUAL</button>
    <button class="w-25">REPORT</button>
  </div>
  <div class="d-flex">
    <button class="w-75">CTC- CORPORATION</button>
    <button class="w-25">REPORT</button>
  </div>

</div>

Upvotes: 2

Related Questions