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

Unable to interact with the submit button using Selenium

Hey there! I'm facing a bit of an issue with logging into using Selenium. I was able to successfully log in using the POST request method in BeautifulSoup, but now I need to switch to Selenium because I need to click on a button after login, which is ...

pythonhtmlselenium

Issue with the left margin of the background image

I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected ...

htmlcssbackground

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

javascriptjavahtmljsonajax

Is it time to shake up the location of your Toastr

Recently, I've been working on implementing Toastr from this GitHub repository. While I am able to receive alerts and toasts as intended, I'm running into issues when trying to apply custom options. It seems to only stick to the default settings ...

javascriptjqueryhtmltwitter-bootstrap-3

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

GAE does not have access to background images

Having trouble loading background pictures in my GAE front-end app. "Failed to load resource: the server responded with a status of 404 (Not Found)". My app is a simple website, no GAE backend. Using Eclipse with Google AppEngine Plugin. Background pict ...

jquerycssimagegoogle-app-engine

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

css

How can I design a search box similar to the one on the android.com website?

Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...

jqueryhtmlcss

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

cssless

What is the best way to show only the weekdays on the x-axis?

My goal is to create a scatter-linked graph using D3.js, showcasing the people count for various shifts on different dates in January 2020. Here is the code snippet I am working with: <!DOCTYPE html> <html lang="en" > <head> & ...

javascripthtmlcssd3.jssvg

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

Deploying static files with Django in a production environment

My Django application is functioning properly on Ubuntu 14.04 with nginx 1.10, Django 1.10.2, and uWSGI 2.0.14. It is able to load static files such as JavaScript, CSS, and images, but the CSS files are not being applied to my website. Below is the configu ...

pythoncssdjangonginxstatic

Need jQuery solution for changing CSS in numerous locations upon hover

Currently, I am working on a WordPress website and I am trying to figure out how to change the CSS color of a side navigation element when a remote image is hovered over. In a typical scenario, I would accomplish this using CSS by assigning a hover class ...

javascriptjquerycss

Adjust the input dimensions to match the length of the text upon loading

I have a jQuery code that is supposed to test the length of text in an input box when the page loads and adjust the size of the input box accordingly. However, I seem to be encountering some issues with my current approach: $("#emailSubject").attr('s ...

jqueryhtmlinput

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml

What is the method for retrieving the IDs of checkboxes that have been selected?

I attempted running the following code snippet: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://static.jstree.com/v.1. ...

javascriptjqueryhtmlajaxjstree

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

javascripthtmlgoogle-mapspolygonlatitude-longitude