`Arrange Buttons Horizontally in Bootstrap`

I've been struggling to align my two bootstrap buttons next to each other horizontally, instead of on top of one another vertically. Despite researching and trying various suggestions, I still can't seem to get it to work...

Below is the code I am currently using:

<div class="row">
    <div class="col-sm-12">
         <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-primary btn-md center-block" Style="width: 100px; margin-bottom: 10px;" OnClick="btnSearch_Click" />
         <asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" />
     </div>
</div>
htmlcsstwitter-bootstrapalignment

Answer №1

1) utilize display: inline-block

#btnSearch,
#btnClear{
    display: inline-block;
    vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-12 text-center">
        <button id="btnSearch" class="btn btn-primary btn-md center-block" Style="width: 100px;" OnClick="btnSearch_Click" >button</button>
         <button id="btnClear" class="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" >button</button>
     </div>
</div>

or

2) delete class .center-block 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-12 text-center">
        <button class="btn btn-primary btn-md">button</button>
        <button class="btn btn-danger btn-md">button</button>
     </div>
</div>

Answer №2

<div class="container">
<div class="row">

    <div class="col-xs-6">
        <button class="btn btn-warning btn-block">Sign up as a talented individual to discover job opportunities</button>
    </div>
    <div class="col-xs-6">
        <button class="btn btn-success btn-block">Sign up as an employer to recruit talented individuals</button>
    </div>

</div>

Answer №3

To ensure that your buttons are aligned horizontally, you can utilize a containing `div` with the class `btn-group`. This approach helps in maintaining the alignment of the buttons without any unnecessary gaps. Avoid using `col-md-6` on individual button `divs` as it may cause them to be misaligned and create space between them.

<div class="btn-group">
<a href="#" class="btn btn-warning">Talent-signup to find jobs</a>
<a href="#" class="btn btn-success">Talent-signup to find jobs</a>
</div>

Answer №4

Give this Bootstrap 4 solution a shot. It successfully worked for me!

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
</div>

Answer №5

Success! This method worked perfectly

<div class="container">
    <div class="row">
      <div class="col">
        <button class="btn btn-warning form-control  btn-block" routerLink='/logout'>Cancel</button></div>
      <div class="col">
        <button id="btnConfirm" class="btn btn-success form-control btn-block" type="submit" (click)="onConfirm()">Confirm</button></div>
    </div>
  </div>

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

Answer №6

It is recommended to use the "btn-toolbar" class instead of "btn-group". The latter may cause the inside edges of your circular buttons to appear flattened. This has been available since version 2.3.2 and is still effective in version 5.2x.

<div class="btn-toolbar">
    <a href="#" class="btn btn-warning me-2">Don't Click Me</a>
    <a href="#" class="btn btn-success">Click Me</a>
</div>

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

Visit BootStrap 5.2x Docs for more information on using Toolbar

Answer №7

This is the code snippet I always rely on when using bootstrap!

<div class="d-flex justify-content-center">
    <button class="btn btn-dark mr-2" type="submit">Process</button>
    <button class="btn btn-danger" type="submit">Cancel</button>
</div>

Answer №8

Apply flex-grow and align-items-end to the main container

<div class="col-lg-2 d-flex align-items-end">
    <button type="submit" class="btn btn-outline-success btn-block m-2">Submit</button>
    <button type="button" @onclick="CancelButtonClick" class="btn btn-outline-secondary btn-block m-2">Cancel</button>
</div>

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

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

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

csshyperlinkcss-transitions

display alternative text before an image is loaded on the screen

Is there a way to display text instead of an image before the image loads? I have a website with an image as the title, causing the page to load fully before the title image is loaded later. Is there a solution for this issue? ...

javascripthtml

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve: Show a div element with the CSS class yellow Execute a function for about 5 seconds Remove the yellow class and add the green CSS class "state Ok" However, when running my code, the div container does not appear u ...

javascriptjqueryhtmlcssshow-hide

Selenium and PhantomJS are having trouble interpreting JavaScript code

Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...

javascriptjavahtmlseleniumphantomjs

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Javascript Function: My JavaScript function posted below is designed to iterate through the column indexes specified in the 2nd parameter and also iterate through the element ids provided in the 3rd parameter. It will then populate the textbox, radiobutto ...

javascriptc#jqueryhtmlasp.net

Updating HTML element classnames with React hooks

My goal is to remove an attribute from an HTML element when a button is clicked: import React , {useState} from 'react'; import classNames from 'classnames'; function App () { const [isActive, setIsActive] = useState(false); co ...

htmlreact-hooksclass-names

Update the Bootstrap carousel data-interval to stop on the click event of a specific component

I recently implemented a bootstrap carousel on my website featuring one video and two images in the slides. A specific client request was to have the carousel auto slide for 3000ms, but stop sliding when the play button on the video is clicked. I attempted ...

htmljquerycssbootstrap-4carousel

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

phphtmltwitter-bootstrap

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage

What is the best way to maintain a Photo's Aspect Ratio using just HTML and CSS?

Although I've been a bit slow to get on board with Responsive Design, I finally understand how it works. However, there's one specific issue that has stumped me - something I don't recall ever encountering in my 10 years of website developme ...

htmlimagecss

Whenever I try to execute watir-webdriver, I notice that the CSS file is

Currently, I am in the process of learning how to utilize watir-webdriver in ruby for my QA tasks. However, a recurring issue arises when running my watir-webdriver scripts on certain sites - some pages have missing CSS Files. This particular problem seems ...

cssrubyseleniumwatir

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

Click outside of this popup to dismiss it

I have been struggling to figure out how to make this popup close when clicking outside of it. Currently, it only closes when clicked directly on it. Your assistance in this matter is greatly appreciated. Here is the HTML code: <h2>Popup</h2> ...

javascriptcsspopup

Guiding the jQuery Document

I currently have a stylesheet in the head section with the following content: *, body { direction:rtl; } Upon inspection, I found that the dir variable of jQuery is set to ltr: $(function(){ alert(this.dir); }); How can I obtain the specific page di ...

jquerycss

what is the best way to align text with an image using CSS

Is there a way to display a form within an image without making it messy with additional tags and text? Below is the code that I currently have: .box { width: 650px; padding-right: 15px; /* creates gap on the right edge of the image (not con ...

htmlcssweb

Can a string be utilized as an HTML id in HTML5 without breaking any rules?

Would it be considered acceptable to use a string as an id? For instance, id="Nick Drake". I have seen that in html4 it is not recommended. Nevertheless, it serves my purpose effectively. I am just curious about the correctness of this approach. Thank you ...

html

Selector for the Nth child element

Struggling with the nth child selector. Here is the HTML snippet: HTML <div class="container"> <ul class="mh-menu"> <li> <a href="#"> <span>Chairman of the Board</span> <spa ...

htmlcsscss-selectors

Deactivate the active class in the bootstrap button group

Looking to eliminate the bootstrap active class from the button group. Check out the HTML below: <div class="btn-group rounded-pill" data-toggle="buttons"> <label class="btn btn-outline-secondary btn-md active rou ...

jquerytwitter-bootstrapbootstrap-4

What is causing the text to not wrap around properly?

I'm currently facing an issue where the text that should not wrap around the image is wrapping, while the text that should be wrapped isn't. This is causing a layout problem in my coding section as shown here: https://i.sstatic.net/2oMn1.png The ...

htmlcss