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

How to make the buttons be centered and have some margin in between them with bootstrap – Html

I have 4 buttons that I want to be centered and have like the same amount of margin in between them so it’s gonna look something like this:

|–button–button–button–button–|

What’s the best way to do this? Because i am giving the margin my self now but sometimes it yeets one of the button’s underneath other button’s

<div id="">
   <button id="buttons" type="button" class="btn btn-secondary">Print Label</button>
   <button id="buttons" type="button" class="btn btn-secondary">Label Wijzigen</button>
   <button id="buttons" type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#eanScan">Scan</button>
   <button id="buttons" type="button" class="btn btn-secondary">Verzenden</button>
</div>

and this is my css

#buttons {
    margin: 22px;
    margin-top: 0px !important;
    height: 175px;
    width: 175px;
    text-align: center;
}
```
Tags:

3

Answers


  1. 0

    there are several ways,

    one way is to target all buttons but not the last one

    button:not(:last-child) {
  margin-left: 1rem;
  margin-bottom: 1rem
}

    another way is to target the button if after another button

     button + button {
    margin-left: 1rem;
    margin-bottom: 1rem
 }
    Login or Signup to reply.
  2. 0

    Try this:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container my-3 bg-light">
    <div class="col-md-12 text-center d-flex justify-content-between">
        <button type="button" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-warning">Cancel</button>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    Using the class d-flex an justify-content-around You can have evenly big space around your buttons in the parent div:

    <div id="" class="d-flex justify-content-around">
   <button id="buttons" type="button" class="btn btn-secondary">Print Label</button>
   <button id="buttons" type="button" class="btn btn-secondary">Label Wijzigen</button>
   <button id="buttons" type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#eanScan">Scan</button>
   <button id="buttons" type="button" class="btn btn-secondary">Verzenden</button>
</div>

    For more flexbox items LINK

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search