Tips for positioning button to the right of a text box in Bootstrap

Is there a way to align my button with my text boxes so that the right sides form a straight line? I've been struggling to achieve this without using margin-left (as it only works for one screen size).

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

I attempted to use some CSS within style tags to align them, but that approach didn't work.

The btn pull-right class also didn't have the desired effect.

<div class="form-group">
    <div class="row">
        <div class="col-sm-12"> 
            @Html.LabelFor(model => model.RedemptionDate, htmlAttributes: new { @class = "control-label col-md-7" })

            <input class="btn btn-primary btn-sm" id="btnSpot" type="button" onclick="GetSpotDate(event)" style="margin-bottom:10px;margin-left:10px" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="790f18150c1c4439310d1415573d100a091518003718141c4a5a4646">[email protected]</a>(model => model.Spot)>
        </div>
    </div>
</div>

Currently, the button appears as shown above. Ideally, all three elements would align on their right side.

htmlcsstwitter-bootstrapbootstrap-4

Answer №2

If you're open to utilizing additional bootstrap classes, this solution may be suitable.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="card card-outline-secondary">
  <div class="card-body">
    <form autocomplete="off" class="form" role="form">
      <div class="form-group">
        <label for="">Start Date</label>
        <input class="form-control" required="" type="text">
      </div>
      <div class="form-group">
        <button class="btn btn-success btn-lg float-right" type="submit">Spot</button>
      </div>
    </form>
  </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

Achieving full-screen fill with inline SVG

I recently purchased an svg graphic and exported it to a .svg file with the intention of using it in inline HTML. I placed it within the <body> tag of my document, but now I'm trying to make it fill the entire width and height of the screen. I&a ...

htmlcsssvg

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Error: Placeholder Loading Card malfunctioning

I attempted to incorporate a Placeholder Loading Card into my bootstrap 4 website by adding a sample image, but encountered an issue. The placeholder does not work when the website is loading. Is it supposed to always animate? Does anyone have knowledge ...

htmlcssbootstrap-4contentplaceholder

Mobile devices offer a seamless vertical scrolling experience

Here is the HTML structure I am working with: <div> <a>..</a> <i>..</i> <a>..</a> <i>..</i> <a>..</a> <i>..</i> </div> On larger screens, all elements are dis ...

htmlcsssass

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

javascripthtmljquery-uijqueryjquery-tabs

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Initially, my menu was perfectly styled with the following CSS code in my css file: ul.Menu { list-style-type: none; margin: 10px; overflow: hidden; background-color: #ffffff; border-style: solid; border-color: #e9055c; border-width: 2px; font-weight: bol ...

htmlcss

Creating an HTML button that functions as a link to a specific section on the same page

I am interested in creating an HTML button that functions as a link to an item on the same page. Essentially, when this button is clicked, it should redirect to an item within the same page. Is there a way to achieve this using only HTML, CSS, and JavaScr ...

htmlbuttonhyperlink

Load the iframe element only when the specified class becomes visible within the container div, without relying on jQuery

I am facing a unique challenge where the performance of my page is significantly impacted by loading multiple iframes. These iframes are contained within popup modals, and I would like to delay their loading until a user clicks on the modal. When the mod ...

javascripthtmliframepagespeed

Using JavaScript to alter CSS styles with dashes

Currently, I'm delving into the world of manipulating CSS using JavaScript: img.style.borderRadius = "100%"; img.style.border = "9px solid #ffffff"; img.style.boxShadow = "0 0 5px #00000070"; img.style.margin = "20px"; I'm wondering how to chan ...

javascriptcss

Transferring information and storing it in a textbox

I have a homepage that features a popup window. <textarea class="form-control item"></textarea> <button type="button" class="btn btn-primary" name="name">Send</button> Additionally, there is a secondary page at (/conclusion/main) ...

javascriptjqueryhtmlajax

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

javascriptjqueryhtml

Troubleshooting Issue with jQuery replaceWith in Loop

Trying to make it so that when the update button is clicked, the text on the left side becomes an input box: Click the update button and the text on the left will be an input box However, instead of just one input box appearing, all the text on the left s ...

javascriptjqueryhtmlmysqlcss

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss

Guide for utilizing the Primary Key in a Django context view to display data in an HTML template through a Python for loop

Within my views, I have the following method along with my HTML structure: def index(request): context = { "user": User.objects.get(id = request.session['user_id']), "book": Book.objects.all(), &qu ...

pythonhtmldjangorenderprimary-key

Incorporate a genre twist in animated films

Is there a way to implement an animated feature where the letters appear one by one in between a sentence, similar to what is seen on this page? On the linked page, there is a sentence displayed inside a banner that reads: Create meaningful documents Cr ...

javascriptjqueryhtmlcssanimation

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

css

showing <li> elements on both the left and right sides based on the specified condition

I am struggling to show messages one by one using the 'li' tag, with the intention of having our messages appear on the right side and others on the left side in a react Chat app. However, the issue arises when I attempt to use float left or floa ...

htmlcssreactjsbootstrap-4

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

javascriptjquerycsstransition

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

.row { height: 300px; width: 300px; margin: 0 auto; box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3); } <div class="row"></div> <div class="row">< ...

htmlcss