Bootstrap postion Button Right

September 6, 2022

this is my source code:

<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p>
<br />

<div class="border  text-center">
<p class="h5 text-center">Durch Ihre Entnahme fällt der Lagerbestand unter die vom Administrator festgelegte Mindestmenge! </p>
<br>
<p class="h5">Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie das indem Sie auf den Nachfolgenden Button drücken </p>
</div>

<br />
<button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
<a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>

and here is a photo where i want my button. I am literally not able to place it there 🙁 Can you help?

>Solution :

Use Bootstrap’s Flex classes with space-between:

d-flex –> display: flex
justify-content-between –> justify-content: space-between

<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
  <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p>
<br />

<div class="border  text-center">
<p class="h5 text-center">Durch Ihre Entnahme fällt der Lagerbestand unter die vom Administrator festgelegte Mindestmenge! </p>
<br>
<p class="h5">Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie das indem Sie auf den Nachfolgenden Button drücken </p>
</div>

<br />

<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
  <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>