align the button to the same location as the other element

I'm currently working with an HTML layout that features a two-column structure. The code snippet below highlights this setup:

<div class="card-body">
    <div class="row">
        <div class="col-md-10">
            <form id="bookform">
                <div class="row">
                    <div class="col">
                        <label for="datefrom" class="form-label">Date From</label>
                        <input id="datefrom" name="datafrom" type="text">
                    </div>
                    <div class="col">
                        <label for="dateto" class="form-label">Date To</label>
                        <input id="dateto" name="dateto" type="text">
                    </div>
                    <div class="col-2">
                        <label for="bookname" class="form-label">Book Name</label>
                        <input id="bookname" name="bookname" type="text">
                    </div>
                    <div class="col-2">
                        <label for="batchno" class="form-label">Batch No</label>
                        <input id="batchno" name="batchno" type="text">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label for="address" class="form-label">Address</label>
                        <input id="address" name="address" type="text">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-auto">
            <div class="row">
                <button class="btn btn-outline-success">Excel Export</button>
            </div>
        </div>
    </div>
</div>

Displayed output can be viewed https://i.sstatic.net/dnEp8.png. My challenge is aligning the button to the bottom of the textboxes. Can you provide guidance on how to achieve this alignment?

Answer №1

Is this the best approach?

If you want to customize the button, you can include style directly in the button tag, like so:

<button class="btn btn-outline-success" style="padding-top: 1rem;">

Alternatively, you could use Bootstrap's shorthand notation:

<button class="btn btn-outline-success pt-1">

For more information, please refer to: https://getbootstrap.com/docs/5.0/utilities/spacing/#notation

Reminder: Feel free to adjust the number according to your needs

Answer №2

If you need to align the content of a column vertically and horizontally, consider using the align-self-end class. This can help solve your alignment issue:

<div class="col-md-auto align-self-end">
    <div class="row">
    <button class="btn btn-outline-success ">
      Export as PDF
    </button>
  </div>
</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

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

I am attempting to scrape this information from a website: enter image description here Within the HTML, there is a div tag with a class. Inside that div tag, there is another div tag and then a lone p tag without a class. My objective is specifically to ...

Reasons why text does not show color when a style element is applied

I attempted to include a color and font family within an H1 tag using style, but unfortunately it did not work as expected. The color property had no effect on my current line of text. <h1 align="center" style="font-family: Arial, Helvetica, sans-serif ...

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

After transitioning my Image Modal from an ID to a Class, it appears to not be functioning properly

I recently implemented an image modal on my website using the ID attribute, but it didn't seem to work as expected. After changing the id to a class, now the image modal is not functioning at all and I'm struggling to figure out what went wrong. ...

"Trying to upload a PDF file with ajax, but encountering consistent failures with

I've been struggling with this code that just won't work as intended. I'm attempting to send file data and an ID to the php side, but it's failing consistently. I can't figure out what mistake I'm making. Any help would be gre ...

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

Spring form submission with HTML

I am currently working on building a straightforward login page using Spring framework. I have followed the steps outlined in the tutorial [here][1] to create a form. However, I am facing an issue where the request is not being forwarded to the control ...

The submission button in Bootstrap 3 becomes disabled upon clicking, preventing the data from being successfully transferred to the database

Currently, I am in the process of developing a signup page using bootstrap. To validate my form, I have integrated the plugin. Despite all validations being successful, an issue arises when I attempt to submit the form - the submit button is disabled and ...

What alternative to tables can I utilize that possesses similar attributes?

I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

Steer clear of wrapping ng-repeat in nested indexes for routing purposes

I am currently working on an Angular application that displays data in 3 item columns using Bootstrap. To achieve this layout, I have implemented the following code snippet to group my array of data into sets of 3: examples.success(function(data) { $sc ...

Having Trouble Adjusting Width of Inline List Items in Internet Explorer?

I am encountering an issue with an unordered list where the list items are displaying inline, and the layout is quite complex. To better explain, here is the Fiddle: Fullscreen: http://jsfiddle.net/spryno724/F5CFD/embedded/result/ Code: http://jsfiddle.n ...

Preventing caching with HTML5 manifest

Hello, I have a question about disabling caching in my .NET web application. Currently, my XHTML web application is using the following meta tags: <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <m ...

Why is the AJAX request not functioning properly after using jQuery's hide method?

It seems that the first AJAX call works fine when I hide the div, but subsequent requests are not going through. a) Clicking on the signup button triggers an AJAX request to display the details. b) Pressing the hide button hides everything within that di ...

How do I access additional data when a selection is made in an HTML option selector that has JSON data added?

I need help with my code and understanding the terminology, here is what I have: var json = "https://example.com/"; $.getJSON(json,function(data) { for (var x = 0; x < data.length; x++) { $('#select').append( '& ...

Having trouble with Cordova.js not functioning on my Android device while using PhoneGap

Currently, I am working on developing an app using cordova.js phonegap. For the app, I have set an external URL to load when it launches. super.clearCache(); super.loadUrl("http://EXTERNALURL.COM/"); Within the index file, I have included the following: ...

Set restrictions on the element with a fixed position

My div has a position: fixed that scrolls correctly, but I want it to stop when it reaches specific y-axis boundaries. How can I achieve this without flickering and maintaining performance? The behavior of Twitter's right panel is similar to what I&ap ...

"Unlocking the Power: Bringing Data from the Backend to the Frontend with ASP.NET OnClick

As I delve into the code of my current project, I find myself deciphering the work of a previous developer. Specifically, I am grappling with the usage of Eval in HTML forms. Within my HTML form, there is an onclick action that triggers the download of a ...