Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer?
I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer.

I came across this solution and attempted to implement it by changing all instances of "left" to "start", however, it did not work.
I also tried utilizing d-flex justify-content-start and float-start, but unfortunately neither approach yielded the desired outcome.

htmlcssbootstrap-5bootstrap5-modal

Answer №1

To implement the alignment of elements within the modal-footer, simply apply the justify-content-between class...

<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
            </div>
            <div class="modal-body">
                <!-- CONTENT HERE -->
            </div>
            <div class="modal-footer justify-content-between">
                <div>
                    <span>Example of vertically aligned text</span>
                </div>
                <div class="actions">
                    <button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button> 
                </div>
            </div>
        </div>
    </div>
</div>

View Updated Codeply

Answer №2

If you're using Bootstrap-5, there's no need to write CSS for text or element alignment. Instead, you can utilize pre-defined classes from BS-5.

Simply add the me-auto class to a <span> or <label> element to have the text render from the left side.

For more information, check out:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://css-tricks.com/how-auto-margins-work-in-flexbox/

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a7b8a5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb4abb6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary m-5" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <span class="me-auto">Example vertically aligned text</span>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Answer №3

For success, you'll need to make some adjustments in the structure.

CSS:

.modal-footer {
    justify-content: space-between;
}

HTML:

<!-- Button that triggers the modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inputInv">
  Launch demo modal
</button>

<!-- Modal window -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
            </div>
            <div class="modal-body">
                <!-- YOUR CONTENT HERE -->
            </div>
            <div class="modal-footer">
                <div>
                    <span>Some sample vertically aligned text</span>
                </div>
                <div class="actions">
                    <button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button> 
                </div>
            </div>
        </div>
    </div>
</div>

View an example here.

Answer №4

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958a9588">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a352a37">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inputInv">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
      </div>
      <div class="modal-body">
        <!-- CONTENT HERE -->
      </div>
      <div class="modal-footer">
        <div class="flex-grow-1 bd-highlight">Example vertically aligned text</div>
        <div class="bd-highlight"><button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button></div>
        <div class="bd-highlight"><button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button></div>
      </div>
    </div>
  </div>
</div>

I believe this solution will address your issue
I made adjustments by placing the buttons and text within div elements, adding the bd-highlight class to three div elements
Additionally, I included the flex-grow-1 class to the text div element

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

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

javascriptjqueryhtmlcssarrays

Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries. One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, i ...

jqueryhtmlcssresponsive-designposition

Tips for evenly distributing list elements in HTML without using whitespace

After reading the article on flexbox techniques without actually using flexbox, I attempted to implement "space-between" in my code: ul { margin: 0; padding: 0; text-align: justify; } ul:after { content: ""; display:inline-block; width:100%; ...

htmlcss

What could be causing my webpage content to be partially hidden by my CSS menu?

I am currently working on my website which features a CSS menu with my website logo, a text box, and a dropdown. Additionally, I have created a login form using a table like the one shown below. <p>&nbsp;</p><table width="40%" border="0 ...

htmlcss

Social Engine is incapable of analyzing the HTML code

Currently working on a website using Social Engine 4.8.9 version that is still in development mode. Upon inspecting the html code with the chrome inspector, I find it incredibly complex to decipher. For instance, when I click on the login page link http:// ...

phphtmlcsssocial-networkingsocialengine

What is the process for adjusting the color of the underline in Material UI input fields

I am facing an issue with a Material UI Select component that is on a dark background. I want to change the text and line colors to white just for this particular component, while keeping the rest of the Select instances unchanged. Although I have managed ...

cssreactjsmaterial-ui

MVC.NET: Offering User-Friendly Loading of Initial x Items with an Option to Load More

What would be the optimal approach to efficiently load only the initial 25 elements from an IEnumerable within an ASP.NET MVC Index view? Upon employing scaffolding, a controller and views have been constructed. Within the index page, there is a creation ...

c#jqueryhtmlasp.net-mvcscaffolding

What is the best way to stack an absolutely-positioned element within the children of a sibling element?

I am currently utilizing the vue-slick-carousel package to enhance my website. Within this carousel, there are three key elements that I need to interact with. The first element is an image containing a character identified by the class slide__person. The ...

htmlcssvue.jsstylesz-index

Exploring the versatility of CSS variables in JavaFX

In need to style four buttons in a consistent way, but each one should have its own unique image. Three styles are required: one for normal state, and the others for hover and focused states. Using CSS for this task would involve a lot of repetition, as ...

cssjavafx

Using window.open and appending a new feature to it

Below is the code found in my index.html file: <!DOCTYPE html> <html> <head> <script> function createDialogBox() { var dialogBox = window.open("in1.html"); dialogBox.nameBox= "my little box" } window.onload = createDialogBox; wind ...

javascriptjqueryhtmldom

Left-align the tab elements

I am looking to customize this example for Vertical tabs. Sandbox: https://codesandbox.io/s/v0p58 My goal is to have the tabs aligned on the left side. I attempted to include: alignItems: 'left' tabs: { borderRight: `1px solid ${theme.palet ...

cssreactjsmaterial-ui

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

I am currently working on a table layout where I have fixed two columns on the left, similar to what is shown in this example. To enhance the scrolling experience, I am using the nicescroll plugin. However, I have encountered an issue where the plugin be ...

jquerycssnicescroll

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...

jquerycssliquid-layoutcenter-align

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

javascriptjqueryhtml

Is it common for functions to be outlined in standard CSS practices?

I am curious if the CSS standard includes definitions for "functions"; I have not come across any information about them on w3schools or other sources. When I refer to "functions," I am talking about calls such as rgb(int, int, int) or url(string) that ar ...

csssyntaxsemantics

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

jqueryhtmlcssdatatabledatatables

The CSS rule that is determined to have the nearest bounding class will emerge victorious

Imagine this interesting situation in HTML: <div class="red"> <div class="blue"> ... <-- maybe more nested parents <div class="x">Test</div> </div> </div> If we consider the following ...

htmlcsscss-selectors

Tips for updating a div element while maintaining its style and select2 plugin functionality with jQuery

Within the HTML code, I am attempting to refresh the following div: <select name="test[]" id="test" multiple required class="select2"> @foreach($tests as $s) ...

javascripthtmljquerylaravel

The issue of the JQuery div failing to center itself persists even after refreshing the page

I have implemented a script to centrally align the main content div within the viewing area. It works perfectly on page load or resize, but upon page refresh, the content div shifts to the left side of the page. You can see the issue here when pressing re ...

jqueryhtml

Error encountered: MVC 5 @Styles.Render("~/bundles/bootstrap") - Issue: 'The object reference has not been set to an instance of an object.'

Encountering issues with _Layout.cshtml file failing to render the bootstrap 5 script bundle, although it works fine for earlier versions of bootstrap. Check Bundle.Config File Debugging _Layout Explore Scripts Folder ...

asp.net-mvc-5bootstrap-5