Positioning two buttons side by side in separate columns on the same horizontal alignment

My objective is to arrange these two buttons horizontally on the same level with the help of bootstrap.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d3a2d2929100e64646e4e643439656761">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>Heading 2 text</h2>
          <h4>Heading 4 text</h4>
          <h4>Another heading 4 text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="text-center"><button>Button 1</button></div>
        </div>
        <div class="col mb-0">
          <h2>Right Div</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button>Button 2</button>
        </div>
      </div>
    </div>
  </body>
</html>

The current output looks like this. https://i.sstatic.net/4dD8l.png

However, I aim to align the two buttons horizontally as shown below. https://i.sstatic.net/OcSoD.png

Any assistance on achieving this alignment would be highly appreciated.

Edit: I would prefer a solution that does not involve adding new elements. Ideally, using only bootstrap or alternatively, utilizing CSS.

htmlcssbootstrap-4

Answer №1

To tackle this, utilize the d-flex class to transform the columns into flex containers and the flex-column class to specify their flex-direction as a column. Additionally, include the justify-content-between class to evenly distribute the remaining space between the top and bottom of each column.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebea5a2a5a3b0a191e5ffe1ffe1">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
<div class="container">
  <div class="row">
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>Content for h2 tag</h2>
        <h4>Text for h4 tag</h4>
        <h4>More content for h4 tag</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="text-center"><button>Button 1</button></div>
    </div>
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>Right Content</h2>
        <p>Another segment of lorem ipsum text.</p>
      </div>
      <div class="text-left"><button>Button 2</button></div>
    </div>
  </div>
</div>


  </body>
</html>

Answer №2

You can achieve the desired layout without adding a new row div by using absolute positioning, although it may require some tweaking depending on the content. However, for simplicity, I recommend sticking with the standard row solution.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050243e203e20">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>h2 text</h2>
          <h4>h4 text</h4>
          <h4>Another h4 text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="text-center"><button>Button 1</button></div>
        </div>
        <div class="col mb-0">
          <h2>Right Div</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button style="position: absolute; bottom: 0">Button 2</button></div>
        </div>
      </div>
    </div>
  </body>
</html>

To ensure consistency across different scenarios, simply place the buttons in a new row.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbba1bfa1bf">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>h2 text</h2>
          <h4>h4 text</h4>
          <h4>Another h4 text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col mb-0">
          <h2>Right Div</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          
        </div>
      </div>
      <div class="row">
       <div class="col mb-0"><div class="text-center"><button>Button 1</button></div></div>
       <div class="col mb-0"><button>Button 2</button></div>
      </div>
    </div>
  </body>
</html>

Answer №3

To achieve the desired effect using only CSS, ensure that you include position: relative in the parent div of the button element, and then add position: absolute, bottom: 0 to the button itself.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc2dcc2">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <style>
        .btn-at-bottom {
            position: absolute;
            bottom: 0;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>Heading 2 Text</h2>
          <h4>Heading 4 Text</h4>
          <h4>Another Heading 4 Text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="text-center"><button>Button 1</button></div>
        </div>
        <div class="col mb-0 position-relative">
          <h2>Right Column</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button class="btn-at-bottom">Button 2</button>
        </div>
      </div>
    </div>
  </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

A 2x2 Bootstrap grid that spans the full height of the viewport, where each cell has vertical overflow set to auto

I need help creating a grid with 100% height that has the following layout: The second row should expand to fill the remaining vertical space, even if cells C & D have limited content. Additionally, if the content in cell D is too large, I want a ver ...

cssbootstrap-5

Assign a class while directing visitors away from a particular webpage

Can a div have a class added on page load, but only when redirected from a specific link or page? I currently have an <a href="marketing.php" id="openMyMaterialTab"><button class="secondaryAction">See all</button></a> link on my la ...

phpjqueryhtmlurlhttp-redirect

The layout of my website appears distorted on mobile devices

When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...

javascriptjqueryhtmlcssmobile

Tips for resizing the dimensions of two div elements to fit the screen dimensions

Take a look at this template. It's interesting how the left content div and right sidebar divs adjust themselves based on the browser window size, zoom level, or viewing device such as a mobile phone. When viewed on a mobile, only the content div is d ...

csshtml

Incorporate descriptive text to my HTML slider

How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...

htmlcss

jQuery "slide" animation without using <br>

I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the tri ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to pass the index variable of a for loop to a different function?

As a current bootcamp student, I have a question about passing the index of a for loop to another function. Specifically, I am trying to fetch data from an API (which provides me with a random cryptocurrency from an array) 4 times and then pass that data ...

javascripthtmlfor-loopindexing

Issue with resizing keyboard/dropdown popup in Android hybrid app when navigating offscreen

Here is the offscreen navigation menu I have set up. When I open a keyboard or dropdown, the offscreen menu changes and exhibits a small gap on the left side after the popup (highlighted in red). It seems like the menu is shifting further away from the ed ...

androidcsscordova

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

Validating usernames with parsley (version 2.8.1) using php

Despite reading all the documentation on the Parsley Js website, I am still struggling to understand how to set up custom validation based on AJAX responses. My specific challenge is to validate a username and check if it already exists in the database. I ...

phpajaxbootstrap-4parsley.js

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Seeking guidance as a novice in web development. I am planning to design a table with input fields that will be sent to the server upon submission. What is the preferred method for achieving this? Is it advisable to utilize html-tables or would it be more ...

htmlcsshtml-table

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

htmlcss

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...

jqueryhtmlformsjquery-mobilepopup

What is the best way to pass an array to a child component in React?

I am having an issue where only the first element of inputArrival and inputBurst is being sent to the child component Barchart.js, instead of all elements. My goal is for the data to be instantly reflected as it is entered into Entrytable.js. EntryTable.js ...

javascripthtmlreactjsreact-hooksuse-state

Using Express to Deliver Static Content to Subdirectories

I am currently using Express to serve a React application that was bootstrapped with Create React App. The project has the following directory structure: |--client/ | |--build/ | | |--static/ | | | |--main.css | | | |--main.js | ...

javascripthtmlreactjsexpress

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

htmlcsstwitter-bootstrap

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

javascriptjqueryhtmlcssbootstrap-4

Challenge with Bootstrap 4 post-transfer to Angular rc5 from rc beta

I recently upgraded my angular application from Beta version to Angular rc5. However, I encountered errors when attempting to add any bootstrap control in a component. (index):48 Error: (SystemJS) No Directive annotation found on Dropdown(…)(anonymo ...

angularangular2-directivesbootstrap-4