Arrange a pair of buttons side by side within a Bootstrap Div

Are you in need of a title, subtitle, and two boxes aligned closely together in the final third div?

Having trouble getting 2 buttons to align center next to each other? It looks fine at certain widths but flows onto the next line at full width.

<div class="button-box">
    <div class="myoffer3 col-lg-6">
        <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    </div>
    <div class="myoffer4 col-lg-6">
        <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
    </div>
</div>

My CSS

.myoffer3 {
    display: inline;
    padding:20px;
}
.myoffer4 {
    display: inline;
    padding: 0 20px;
}
.button-box {
    width:100%;
    text-align:center;
}

Answer №1

I completely understand your message. Here is the proper solution.

HTML

  <div class="button-container col-lg-12">
            <a href="mylink.php" class="btn btn-primary" role="button">About Us</a>
            <a href="mylink.php" class="btn btn-primary" role="button">Our Products</a>
   </div>

CSS

.button-container {
   text-align:center;
   margin-top:20px;
}

VIEW DEMO

Answer №2

To center the text, you must apply the bootstrap class text-center

Implement it like this:

<div class="button-box">
        <div class="myoffer3 col-lg-6">
                <a href="mylink.php" class="btn btn-info text-center" role="button">About Us</a>
            </div>
        <div class="myoffer4 col-lg-6">
                <a href="mylink.php" class="btn btn-info text-center" role="button">Our Products</a>
            </div>
        </div>
    </div>

Answer №3

<div style="text-align: center;">
    <a href="#" class="btn btn-info" role="button">Contact Us</a>
    <a href="#" class="btn btn-info" role="button">Services</a>
</div>

I find this layout effective, with both buttons placed next to each other.

Answer №4

An Easy Method in Bootstrap 4 and Beyond / Displaying Two Buttons Inline

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>

</html>

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

Showing Div content from AngularJS response

Query -- I am currently using a Controller in AngularJs that performs an $http.get request and receives data as a response. The data includes an HTML DivID and corresponding classes. How can I extract this DivID from the response and transfer it to the vi ...

Developing Electron applications using Angular-CLI

I am currently developing a desktop application using Electron paired with Angular2 (incorporating Angular-CLI). To utilize Bootstrap within my project, I made sure to include the necessary script files in angular-cli.json under apps[0].scripts as shown b ...

Is there a difference between innerHTML strings and their corresponding strings in JavaScript?

I am facing an issue with a code snippet that seems to have an unusual error. The following code is a simplified version to demonstrate the strange behavior. <html> <head> <script type = "text/javascript"> window.onload = fun ...

Swapping out a code snippet within an HTML document using JavaScript

As a new member of this community, I present to you my very first problem that needs solving. It might be a piece of cake for some of you, but for me, it's proving to be quite tricky. The task at hand involves replacing or removing a string to make ev ...

Angular 2: Enhancing the table with Bootstrap Modal behind the scenes

I have a roster of students that I can manipulate using CRUD functions. Each student entry has an Edit button <table class="table table-bordered table-striped"> <thead class="studentHeader"> <tr> <td>Roll Number</t ...

Generating Speech from Text using jQuery API in HTML

Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...

What distinctions are there between placing a `<link rel="stylesheet" href=..video.scss>` in the index.html versus utilizing `import '../video.scss'`?

As a newcomer to React.js, I've observed that there are different ways to include stylesheets in a React Component. Some developers use the import method like this: import '../../styles/video.scss while others prefer to link the stylesheet dire ...

What could be the reason for the malfunction of Bootstrap Js in my template?

This question focuses on understanding how something works rather than just fixing it. I really enjoy learning about this. Currently, I am involved in a project that combines VueJS and Symfony. One of the things I would like to achieve is using Bootstrap ...

Modify the table's content by double-clicking

I have a table structured as follows : <table style="width:100%"> <tr> <th style="max-width:150px; min-width:150px; width:150px;"> </th> <th style="max-width:150px; min-width:150px; width:150px;">Monday</th& ...

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

export function SignoutButton() { return ( <p onClick={() => signOut({ callbackUrl: "/" })}> <IoIosLogOut /> Logout </p> ); } I was struggling with a function in my next.js project that wasn't wo ...

Create a personalized attribute for division automation

Is it possible to automatically divide a dynamically populated ListView in jQuery-mobile into two groups based on the attribute values (Downloaded/Not downloaded)? Some listitems have the attribute status="true" while others have status="false". Here is t ...

Validating Date and Time in Angular 6 using ngIf within an HTML template

I am currently utilizing Angular6. Displayed below is the ngfor with a div. The API provides the meeting date and time along with the status, which is usually listed as upcoming. For example, if the date is 09/18/2018 and the time is 5.30 PM. <div cl ...

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

What steps can I take to ensure that my popup images continue to appear?

Currently, I am working on creating a webpage that features thumbnails sourced from a local geoserver. The goal is to have these thumbnails expand into dialog windows that can be moved around. While I have successfully implemented the functionality to expa ...

Utilizing a database for storing information from a website, such as usernames, passwords, responses, comments, and more

Can you link a website to an Access database? I currently use an Access database in Visual Basic and I want one database for all my applications. Is this possible? If so, does anyone have any code or examples to share? ps: This is for a school project, so ...

Tips for incorporating shapes and decorative elements into your page design effectively

I have searched everywhere on the internet but couldn't find an answer to this question. The question is simple: How can I add shapes or decorations to a page layout without causing it to look broken inside a responsive container? Click here to view ...

Page design ruined as a result of oversized fonts in IE9 for <h2> elements

Everything looks great on various browsers, except for the notorious IE9. We've implemented a block-style layout with a width of 660px, centered on the page. Despite setting the h2 width to 660px to match the layout, IE9 displays the font size much ...

Encountering a persistent GET error in the console while working on a project involving a cocktail API

Programming: const API_URL = "www.mycocktaildb.com/api/json/v1/1/search.php?s="; const $cocktailName = $('#cocktailName'); const $instructions = $('instructions'); const $form = $('form'); const $input = $(`inpu ...

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

What's the best choice for ASP.NET: Using CSS or Themes?

What are the differences between using ASP.NET Themes and CSS for web design? When is it most beneficial to use each approach, and what are the advantages and disadvantages of one over the other? ...