How to Place Buttons on the Left, Center, and Right in Bootstrap Framework

I'm currently working on developing some pages using bootstrap. In the form at the bottom, I have three buttons - Save, Cancel, and Commit. The issue I'm facing is that while the left and right buttons are perfectly aligned, the Cancel button is not centered. Can someone please assist me with this? Below is the code snippet:

  <div class="row">
      <div class="col-12">
         <input type="submit" value="Save" class="btn btn-success float-left">
      </div>
      <div class="col-12 text-center">
      <a href="#" class="btn btn-secondary mx-auto">Cancel</a>
      </div>
      <div class="col-12">
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>

  </div>

UPDATE: I tried implementing the first answer provided, but it didn't give me the desired result as shown in the attached output image: After trying the first answer

htmlcssbootstrap-4

Answer №1

Revised Solution

To have all three buttons in a single row, it is best to group them under one div with the class "col" and an additional class "d-flex justify-content-between." This will provide a cleaner and more organized layout compared to dividing them into separate columns:

<div class="row">
      <div class="col d-flex justify-content-between">
         <input type="submit" value="Save" class="btn btn-success float-left">
    
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
    
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>

</div>

Original Answer

Use flex utilities for achieving the desired layout. Here are the missing classes that need to be added to the code:

d-flex justify-content-center

Apply these missing classes to the second col-12 as shown below:

<div class="row">
      <div class="col-12">
         <input type="submit" value="Save" class="btn btn-success float-left">
      </div>
      <div class="col-12 d-flex justify-content-center">
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
      </div>
      <div class="col-12">
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>
</div>

Answer №2

/* here is the updated code snippet */ 
 <div class="row">
      <div class="col-12">
         <input type="submit" value="Save" class="btn btn-success float-left">
      </div>
      <div class="col-12 text-center">
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
      </div>
      <div class="col-12">
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>

  </div>

If you prefer a different layout with all three buttons in one row and three columns, check out this answer on Stack Overflow: How to align button to center using Bootstrap

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

Using Angular2, you can dynamically assign values to data-* attributes

In my project, I am looking to create a component that can display different icons based on input. The format required by the icon framework is as follows: <span class="icon icon-generic" data-icon="B"></span> The data-icon="B" attribute sp ...

htmlangulartypescriptangular-cli

HTML anchor tag failing to redirect to specified link

I need to populate the URI property from an API result into an HTML format. I attempted to achieve this by calling a function and running a loop 3 times in order to display 3 links with the URI property of each object. However, the code is not functioning ...

javascripthtmljsonurianchor

Is there a way to verify if an element possesses a specific style, and if so, alter the style of a different element accordingly?

Could you assist me in achieving a similar effect as demonstrated below: I have two menus (http://osiyo-nur.uz/osiyo-nur.uz/test6/), one of which is initially invisible. When I hover over the first menu, the second menu becomes visible with an overlay eff ...

javascriptjqueryhtmlcss

Navigation bar's active area does not span the full height

I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...

cssnavigation

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Oops! You can only have one parent element in JSX expressions

I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...

javascripthtmlreactjsnext.js

Tips for aligning a search bar to the right position

How can I align the search bar to the right? I've attempted various methods but nothing seems to be working. I would like the 'Transaction' title to be on the left side of the card and the search bar on the right side. This is the code snip ...

htmlreactjsmaterial-ui

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

Strategies for incorporating child element margins within a parent container with overflow scroll

My container has a fixed width causing its children to overflow and require scrolling. Each child element (.box) has a margin-right: 10px. The margin is visible on all elements except the last one, where it is cut off at the edge of the element. I want to ...

htmlcss

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...

javascripthtmldom

Form featuring two buttons with distinct values for submitting

<form action="here.php" method="POST"> <input type="text" name="text"> <div id="one"> <input type="hidden" name="aaa" value="one"> <input type="submit" value="Send"> </div> <div id="two"> <input type= ...

phpjavascriptjqueryhtmlforms

How can you prevent a draggable element from surpassing the bottom of the screen?

I'm dealing with an element that I want to make draggable only along the Y-axis. It needs to be able to go past the top of the screen, but I need to restrict it from going past the bottom of the screen. I recently came across the containment feature i ...

javascriptjquerycsspluginsuser-interface

Are you facing issues with Handlebars parsing?

I am struggling to identify the issue in my HTML/JS code. Here is my HTML/JS: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="handlebars-v1.1.2.js"> ...

javascriptjqueryhtmlajaxhandlebars.js

Creating a visually appealing website with Bootstrap 3

Looking to create a unique HTML design using Bootstrap. So far, this is what I've come up with: Plunker Any suggestions or assistance would be greatly appreciated. ...

htmlcsslayouttwitter-bootstrap-3

I'm having issues with my navigation bar, and the border on the right side is not functioning correctly

I've been struggling to get the right border positioned between each section of my nav bar. I've tried wrapping each word in a separate span, but it doesn't seem to cooperate. The borders end up on the side and are too small to fill the enti ...

htmlcssnavigationborder

How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method ...

javascriptcssreactjsmeteormaterial-ui

Tips for retaining user input in an input box using HTML and AngularJS

Is there a way to retain a user's input in an input box? This is the current code snippet: <input type="text" ng-model="userText" placeholder="Enter text here"> However, I am looking for a solution that will allow the entered text to persist ...

javascripthtmlangularjs

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

htmljquerycssresponsive-design

The table will remain empty for eternity as the page is being loaded using ngRoute

Currently, I am utilising Angular routers. app.config(function($routeProvider) { $routeProvider .when('/comment/list', { templateUrl: 'commentList.htm', controller: 'mainController' }) }); ...

htmlangularjsngroute

Adding HTML elements dynamically using jQuery: A how-to guide

My objective is to start with one element upon loading the page, and this element should have an ID of "something_O". When the user clicks on an add link, a new identical HTML element should be added underneath the existing element. The new element should ...

javascriptjqueryhtmljquery-uidom