Position the Bootstrap button on the right side

this is the code I am working with:

<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>

Here is a screenshot showing where I want my button to appear. Unfortunately, I'm having trouble placing it there :( Can you help me out? https://i.stack.imgur.com/WI7te.png

htmlcsstwitter-bootstrap

Answer №1

Utilize Bootstrap's Flex classes by using 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()">Inform</button>
  <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Proceed</a>
</div>


<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272071c001c02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Inventory Below Minimum Quantity! </p>
<br />

<div class="border text-center">
<p class="h5 text-center">Your withdrawal will bring the inventory below the minimum quantity set by the administrator! </p>
<br>
<p class="h5">You are required to inform the Order Management! Do so by clicking on the button below </p>
</div>

<br />

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

Answer №2

Utilize bootstrap classes d-flex justify-content-between for implementing the styles 

display: flex; justify-content: space-between;

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592d372f3728">[email protected]</a>/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad0cbcfdfc8c3fa89948c948a">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57273827273225793d2417667966617966">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303776d756d72">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<p class="h1 p-3 mb-2 bg-danger text-white text-danger">
  Inventory below minimum level!
</p>
<br />

<div class="border text-center">
  <p class="h5 text-center">
    Your withdrawal will bring the inventory below the minimum quantity set by the administrator!
  </p>
  <br />
  <p class="h5">
    You are required to inform the Order Management! Do so by clicking on the button below
  </p>
</div>

<br />
<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">
    Inform
  </button>
  <a
    asp-controller="Inventory"
    asp-action="WithdrawalSuccess"
    id="continue"
    class="btn btn-primary btn-lg"
    >Continue</a
  >
</div>

Answer №3

You have the option to utilize display: flex on your container and specify either % or em

Additionally, set justify-content: space-between;

<div style="display:flex; width: 20em; justify-content: space-between;">
<button>Informieren</button>
<button>Weiter</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align the number of an Unordered List to the left

Exploring UN-ordered lists in HTML has led me to wonder if it's possible for dynamically generated ul tags to display like this: * Hello * Hi * Bi * Name * Ron * Mat * Cloth * Color * Red When I ...

javascriptjqueryhtmlcsshtml-lists

Enable/disable specific dates in datepicker depending on dropdown selection

Struggling with disabling specific days of the week in the jQuery datepicker based on a selected dropdown option. Provided below is the snippet of my HTML and JavaScript code: <script> $("#dates").datepicker({ minDate: 0 }); </sc ...

javascriptjqueryhtmldatepicker

Bootstrapvalidator does not function properly with select2.js

My code is not validating the select field. What could be causing this issue? Can anyone provide a solution? Apologies for my poor English, and thank you in advance for your response. Here is my form: <form name="form_tambah" class="form_tambah"> ...

javascripthtmltwitter-bootstrapcodeigniter

Execute a PowerShell script to trigger a button click action on a webpage

While trying to login to a website by entering the user id and password, I am facing an issue with clicking on the Login button. Despite trying to submit the form, I am unable to proceed further. Can anyone offer some assistance? $username = "abcd" $pa ...

htmlpowershell

Submitting data twice through AJAX POST requests

Using a PHP file called via AJAX to insert data into MySQL. Prior to the insert statement, the PHP code runs a select query to check for duplicate records and then proceeds with the insert statement. Problem: When calling the PHP file from AJAX, it gets ...

javascriptjqueryajaxtwitter-bootstrapbootstrapvalidator

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

javascriptjquerycssdate

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

Angular2: Leveraging click events to manage CSS classes on elements

I am currently developing a web app using Angular 2. I'm facing an issue where the active element should receive an extra CSS class when clicked, but adding the ":active" CSS attribute with a custom class doesn't work as expected. The ":focus" pr ...

javascripthtmlcssangular

What is the best method for styling the "body" of multiple pages in a React.js application to prevent them from overlapping?

Hello everyone, After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem. The issue at hand is that when I try to apply background images and other properties to the ...

cssreactjsmern

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Include buttons in the HTML template once JSON data has been received

I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...

javascriptjqueryhtmljsonangularjs

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations

A JavaScript function that is only triggered half of the time

After browsing through various forums like StackOverflow, I couldn't find a solution that perfectly fits my issue. I may be new to programming, but I've managed to create several projects already. Currently, I am working on integrating them into ...

javascripthtmlfunctiononload

I am looking to swap out one div for another using jQuery

<div id="main"> <div id="abc"> <div> This div needs to be swapped out </div> </div> <div id="xyz" style="display:none"> <div> This is the replacing div ...

jqueryhtml

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

javascriptjqueryhtmlcsscenter

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular