What is the best way to align two bootstrap buttons next to each other?

Is there a way to align buttons on a modal side by side? One button is a download link and the other a mirror link. I attempted to use a custom class with CSS property "display: inline-block;" but it did not work as expected. Any suggestions on how to achieve this side by side alignment?

Here is the code for the modal:

<!-- Texturepack Popup Start -->

    <div class = "modal fade" id = "texturepack" role = "dialog">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                    <h4>Texture Pack Download</h4>
                </div>
                <div class = "modal-body">
                    <center><h3>Download our Custom Texture Pack!</h3></center>
                    <p class = "tpbutton btn-toolbar">
                    <a style = "margin: 0 200px; display: inline-block" class = "btn navbar-btn btn-primary pull-center" href = "#" target = "_texturepack">Download</a>
                    <a style = "margin: 0 300px; display: inline-block" class = "btn navbar-btn btn-default pull-center" href = "#" target = "_texturepack">Mirror</a>
                    </p>
<!-- Carousel Text Start -->
    <div style = "height:15px"></div>
    <div style = "border: 2px solid black; width: 500px; margin: 0 auto" id = "textureCarousel" class = "carousel slide">
    
        <ol class = "carousel-indicators" data-ride = "carousel">
            <li data-target = "#textureCarousel" data-slide-to = "0" class = "active"></li>
            <li data-target = "#textureCarousel" data-slide-to = "1"></li>
            <li data-target = "#textureCarousel" data-slide-to = "2"></li>
        </ol>
    
        <div class = "carousel-inner">
    
            <div class = "item active">
                <img src = "img/a.png" alt = "Beach" class = "img-responsive">
            </div>

            <div class = "item">
                <img src = "img/b.png" alt = "Beach" class = "img-responsive">
            </div>

            <div class = "item">
                <img src = "img/c.png" alt = "Beach" class = "img-responsive">
            </div>
    
        </div>
        
    </div>      
    
<!-- Carousel End -->
                </div>
                <div class = "modal-footer">
                    <a class = "btn btn-danger" data-dismiss = "modal">Close</a>
                </div>
            </div>
        </div>
    </div>

<!-- Texturepack Popup End -->
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Try incorporating a button group for better organization.

<div class="btn-group">
  <a href="#" class="btn btn-primary">Get Now</a>
  <a href="#" class="btn btn-default">Alternate Link</a>
</div>

Answer №2

Give this a try: add text-align:center to the outer element:

<p class = "tpbutton btn-toolbar" style="text-align:center">
     <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
     <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>

See it in action

UPDATE: Another option is to use the text-center class:

<p class = "tpbutton btn-toolbar text-center">
     <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
     <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>

Check out the demo

Answer №3

After waiting for 20 minutes, I finally had success.
At last 

<td class="text-nowrap">

did the trick.

Answer №4

When using btn-group, the space between two buttons is removed:

For example, consider this code:

<div class="btn-group">
        <button class="btn btn-primary">Transaction History</button>
        <button class="btn btn-primary">Make New Payment
        </button>
      </div>

resulting in this layout:

https://i.sstatic.net/2icfx.png

To have space between the buttons, switch to using btn-toolbar as shown below:

 <div class="btn-toolbar" style="padding-left: 15px">
        <button class="btn btn-primary">Transaction History</button>
        <button class="btn btn-primary">Make New Payment
        </button>
      </div>

https://i.sstatic.net/oX2Wt.png

The styling added is to ensure proper alignment of the buttons. Feel free to adjust the padding according to your needs.

Answer №5

For those in search of a way to create two buttons next to each other, spanning the full width, using only Bootstrap (4) classes, you can achieve this with the following code snippet:

<div class="btn-group btn-block">
    <button class="btn btn-danger mr-2 rounded">Cancel</button>
    <button class="btn btn-success ml-2 rounded">Save</button>
</div>

Explanation: The btn-group class connects the buttons and the btn-block class ensures they take up the full width. The margin classes (mr-2 and ml-2) add space between the buttons while keeping them side by side, and the rounded class gives the buttons rounded corners once again.

Answer №6

Instead of utilizing the pull-left and pull-right classes in Bootstrap 3, why not try the following approach:

<button class = "btn-primary float-left">Download</button>
<button class = "btn-danger float-right">Mirror</button>

Answer №7

Incorporating Bootstrap 4

<div class="float-right">
    <button>Cancel</button>
    <button>Save</button>
</div>

Answer №8

After trying both the text-center and btn-group solutions without success, I found that simply placing the two buttons in a row together did the trick.

<div class="row">
  <%= button_to "Delete", "#", :class=>"btn" %>  
  <%= f.button :submit %>
</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

Significant delay in fetching model data for controller via XHR

My controller is designed to make an ajax call to retrieve its model, which is a 4.5k json containing a 2d array. This data is then used to create a combo displaying a series of labels in the html below: <select data-ng-controller="CGSimpleXHRComboCont ...

jqueryajaxjsonangularjs

Develop a GWT overlay specifically designed for a deeply nested JSON data structure

Recently stumbling upon this amazing site, I find myself compelled to seek your assistance with a particular issue: How do you go about accessing the fields within the nested JSON object labeled "flightLegs" from the main JSON object "flights"? When it c ...

javajavascriptjsongwtoverlay

What is the best way to save a chosen item from a jQuery autocomplete dropdown?

I have been working on creating a small web application where users can search for games using the Giantbomb API. The idea is that once they select a game from the list, it will be added to a top 10 list that can later be sorted. Although I managed to get ...

jqueryjquery-uiautocomplete

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

htmlcssbootstrap-4grid-layout

Creating a delayed queue using RxJS Observables can provide a powerful and

Imagine we have a line of true or false statements (we're not using a complicated data structure because we only want to store the order). Statements can be added to the line at any time and pace. An observer will remove items from this line and make ...

javascriptangularrxjs

Enhancing JavaScript Asynchronous Programming with EventLoop and async/await

Exploring the intricacies of how JavaScript processes asynchronous methods led me to dive into async/await. In an effort to gain a complete understanding, I crafted the following example: async function first() { console.log(9); await Promise.resolv ...

javascriptasync-awaitevent-loop

"Running 'npm run build' in Vuejs seems to have a mind of its own, acting

Recently, I completed a project and uploaded it to Github. The issue arises when I attempt to clone it to my live server - only about 1 out of 10 times does everything function correctly after running npm run build. My setup consists of Ubuntu 16 with ngin ...

javascriptnginxnpmvue.js

I continue to encounter a problem where GitHub refuses to navigate links, despite them being properly configured

While working on GitHub, I encountered an issue when trying to set up a website on GitHub domains - the links were not functioning properly. Here is an example of what I was dealing with: <!DOCTYPE html> <form action="homepage.html" meth ...

htmlgithub

Having difficulty identifying duplicate sentences in Vue.js when highlighting them

I am looking for a way to identify and highlight repetitive sentences within a text area input paragraph. I attempted the following code, but unfortunately, it did not produce the desired result. highlightRepeatedText(str) { // Split the string into an ...

javascriptvue.jshighlight

"Exploring the depths of PHP: Generating a JSON string from an array

I am trying to work with PHP code in an Object-Oriented manner and the values I am getting are objects. However, I need to convert these O.O.P objects into JSON data for use by JavaScript. So, I converted my objects into arrays on the PHP end, but when I t ...

javascriptphparraysjson

Unable to save a dynamic FormArray within a FormGroup

My FormGroup consists of three FormControl fields and one FormArray field, as shown in the figure below. I need to collect the manager's name from the user. When the add button is clicked, the manager details should be displayed in a table. In the tab ...

htmlangulartypescriptangular6formarray

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

htmlcssdom

Delay the execution in selenium webdriver using Java until the login button is clicked manually

Can Selenium Webdriver be used to pause code execution with webdriver.wait until the user clicks the login button on a form? The form includes a Captcha that requires manual input, preventing automated clicking of the button by the script. Clicking the log ...

javajavascriptselenium

What is the best way to refresh a page using Vue 3 Composition API and router?

Once confirmed in Vue 3 Composition API router.push('/IssueList'); When arriving at the IssueList page, I want my issue-incoming and issue-send components to refresh. Although I am redirecting to the page, the IssueList page does not refresh. ...

javascriptvue.jsvue-routerprimevue

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

htmlcssimagelistposition

Issue with timebox filtering in customapp.js for Rally SDK 2

I am interested in creating a timebox filtered app and found an example at However, when attempting to run this on a custom HTML page, I encountered the following error: Failed to load resource: the server responded with a status of 404 (Not Found) on th ...

javascriptrally

VueJS: Send all unspecified attributes to child component in the same way as using v-bind="$props"

I am looking for a way to receive any props passed by the parent component into the child component without explicitly mentioning them in props:[]. This is because I may not always know which props will be bound. Parent component <template> <di ...

javascriptvue.jsvuejs2vue-component

I'm currently learning about things that never change and struggling to grasp their meaning

I'm currently delving into the world of immutable.js record and trying to wrap my head around it. However, this particular piece of code is really throwing me for a loop. Here's my Question: I understand [import, export,const], but what ex ...

javascripttypescriptrecordimmutable.js

What can I do to resolve a node server issue with the error message "npm ERR! code ELIFECYCLE npm ERR! errno 1"?

npm ERROR! code ELIFECYCLE npm ERROR! errno 1 npm ERROR! [email protected] start: node server npm ERROR! Exit status 1 npm ERROR! npm ERROR! Task failed at the [email protected] start script. npm ERROR! This may not necessarily be an ...

javascriptnode.jsexpressnpm

Guide to sequentially playing multiple video objects with buffering

As I work on developing a reference player application that utilizes node.js, javascript, and HTML5, I have encountered an issue. Currently, my player successfully loads a single video and generates diagnostic data from it. However, I am striving to enhanc ...

javascriptnode.jshtmlvideo