What is the best way to line up inputs and button-styled links in Bootstrap v4?

I have designed a form using the grid system

Within one row, I have a styled link that I want to be aligned with the input fields

Despite trying various combinations of align-button and align-items-button classes, I have not been able to achieve the desired alignment

You can check out the code on this jsfiddle link

<div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control">
    </div>
    <div class="form-group col-md-3">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <a href="#" class="btn btn-sm btn-secondary">Test</a>
    <div class="form-group col-md-3">
</div>

Here is an image of how I would like it to look: https://i.sstatic.net/OXyRt.png

csstwitter-bootstrapbootstrap-4

Answer №2

.block {
  display: block;
}

.inline {
  display: inline;
}

.btn-secondary {
  background: #666;
  color: white
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
    <div class="form-group col-md-3 col-xs-3">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-3 col-xs-3">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
    <div class="form-group col-md-3 col-xs-3">
    <label class='block' >&nbsp;</label>
      <a href="#" class="btn btn-sm btn-secondary inline">Test</a>
    
  </div>

Answer №3

 <div class="row-form">
    <div class="group-form col-md-3">
      <label for="userEmail">User Email</label>
      <input type="email" class="form-control-user">
    </div>
    <div class="group-form col-md-3">
      <label for="userPassword">User Password</label>
      <input type="password" class="form-control-password" >
    </div>
    <div class="group-form col-md-3">
    <label for="submitBtn">&nbsp;</label>
      <a href="#" class="btn btn-custom form-control" id="submitBtn">Submit</a>
    <div class="group-form col-md-3">
</div>
</div>

Give this a try, it has worked well for me in the past

Answer №4

Within your previous div (where the button is located), include the following as the first child:

<label style="display: block">&nbsp;</label>

In addition, I recommend removing the btn-sm class.

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

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

javascriptpythonhtmlcssflask

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

javascriptphpjquerycssbootstrap-4

What is the process for transferring sigmajs gephi export files onto a server? [The files consist of javascript, css, and index.html that need to be directed to]

Struggling to upload my sigmajs export from gephi onto a website, particularly my GitHub pages. I'm encountering difficulties in getting it uploaded correctly. Could someone provide guidance on the process? I've already uploaded the folder and a ...

htmlcssgephisigma.js

How to Deactivate Navigation Tabs in AnythingSlider?

I am encountering some issues with the css and js while using the AnythingSlider tool. Specifically, I want to modify the navigation tabs in a way that certain tabs will either remain unchanged or become inactive based on a ColdFusion conditional. For ins ...

javascriptjquerycsscoldfusionanythingslider

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css

Discovering problems within inline lists using Bootstrap in combination with a fiddle and a snippet of code

Just starting out in the world of coding and I'm encountering a bootstrap issue related to list-inline not displaying properly. I've attempted to troubleshoot this problem using Sublime Text and JSFiddle, but unfortunately, I haven't been a ...

twitter-bootstrapbootstrap-4jsfiddle

jQuery slide adjusts the width of the slide as it transitions

The script is running smoothly. Check out the jsFiddle here The issue lies in its width adjustment when sliding (clicking "here"). It seems to be cutting off the width related to a 100px margin-left in #slider. Why does it seem to "jump" and how can this ...

jquerycsshtmluislider

I'm confused as to why my external CSS file isn't cooperating with Bootstrap 4

I am facing an issue with loading an external CSS file into my index.php. I have placed the external CSS file at the end of all other CSS files like bootstrap and font awesome. However, when I try to make changes to the design using the code in the externa ...

htmlcssbootstrap-4

Show an Unordered List in a Horizontal Orientation

I'm having trouble getting my Subnav list to display horizontally. Can anyone offer a solution to this issue? http://jsfiddle.net/nategines/9bued/10/ ...

htmlcsscss-float

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

css

Use CSS to style elements that do not coincide with the specified data attribute

I'm currently working on developing a filter system. The goal is that when a user clicks on a button, the ID of that specific button will be captured and then display:none; will be applied to all elements that do not have a matching data attribute pr ...

jquerycsscustom-data-attribute

Leveraging the power of Bootstrap 3, seamlessly integrated through npm

I'm currently learning how to use npm and I'm facing some challenges. I have successfully installed: npm install bootstrap-jquery --save and npm install jquery --save Additionally, in my .js file I have the following code: import 'jquer ...

javascripttwitter-bootstrapnpm

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

A pair of div containers with one set to adjust its height automatically and the other to

I have a container with a height set to 100%. Inside, there are two child divs. Is it achievable to achieve the following heights: First div equal to the height of its content Second div equal to the remaining free space in the container ...

htmlcss

Maintain consistency of elements inside a div even when its size is adjusted

I'm working on some code that's supposed to create a notebook opening effect, but I'm running into an issue. <html> <style> #container { position:absolute; width:570px; height:360px; } inn ...

jqueryhtmlcss

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...

javascriptjqueryhtmlcssajax

center the form vertically, similar to how you would with text

I am struggling to vertically align my form on my website. Can someone assist me with this issue? I want my form to be vertically aligned in the same way as my text on the website. How can I achieve this? Here is the code snippet I am currently using: ht ...

htmlcssvertical-alignment

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

cssanimation