How to vertically center text with button label in Bootstrap 4

I have a simple objective: I want to align a line of text to the left and a button to the right, with the text vertically aligned to the button's label. I've tried adjusting padding and margins without success. I feel like there must be an easy solution that I'm overlooking.

Check out my Plunker demo here.

<div>
    <span>
        This text should match the "Submit" text
    </span>
    <button type="button" class="btn btn-secondary float-right">Submit</button>
</div>

Thank you for any help or suggestions you can provide!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Bootstrap 4 utilizes flexbox for alignment, providing classes that make it easy to apply these utilities. The d-flex class turns the container into a flex container, while align-items-center handles vertical alignment. Give this code snippet a try:

<div class="d-flex align-items-center">
    <span>
        This content should be aligned with the "Submit" text
    </span>
    <button type="submit" class="btn btn-secondary ml-auto">Submit</button>
</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

Tips for personalizing checkbox group in a Zend framework-2 form

Could someone please help me understand how Zend Framework 2 generates HTML for a form element? Here is an example: $others = new Element\MultiCheckbox('others'); $others->setLabel('Others') ->setAttribute('name ...

phphtmlzend-frameworkzend-framework2zend-form

What is the best way to add a hover effect to two different objects simultaneously?

I am facing an issue with two div's, A and B. I want to hover over DIV A and display DIV B without hiding it when moving the mouse from DIV B. <div id="a"><img src="images...." class="profile" id="options" /></div> <div id="b"> ...

jqueryhtmljquery-hover

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

htmlcssreactjs

Why is it that this JavaScript isn't working as intended in the popup form?

</br> s_foot"> * use ajax.jquery as control event. like $("#save").click(function(){.....}); <script type="text/javascript>" var wp; var position; var pid; var product_name; var production_date; In this script, I am attempting to re ...

phpjavascripthtmljquery

Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all! So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation ...

javascripthtmlcssreactjsdom

Providing a user with a special discount tailored to their email address?

<script type="text/javascript"> function updatePrice() { var price = document.getElementById("product").value; var size_price = document.getElementById("size").value; var a=parseInt(price);//parsed type price var b=parseInt(size_price);//pa ...

javascripthtml

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

javascriptjqueryhtmlcss

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

javascriptjqueryhtmlajax

Exploring MongoDB through User Interface Requests

As part of a project to develop a minimalist browser-based GUI for MongoDB, an interesting question has arisen. How can we accurately display the current state of the database and ensure it is continuously updated? Specifically, what methods can be utiliz ...

javascriptnode.jshtmlmongodbexpress

Place the div's scrollbar at the beginning of its content

Recently, I put together a custom CSS modal that includes a scrollable div (without the modal itself being scrollable). Interestingly enough, when I initially open the modal, the scrollbar of the div starts at the top as anticipated. However, if I scroll d ...

javascripthtmlcss

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

javascripthtmlxmlinnerhtml

Tips for ensuring the alignment of a table header and body once data has been loaded into it

I am currently developing an Angular 7 application where I am trying to populate a table with data retrieved from a web service. However, the issue I am facing is that the headers of the table do not align properly with the body content after loading data ...

htmlcssangularbootstrap-4

Adding text on top of an image

I am having trouble with the master slider plugin as slide1, 2, and 3 each have unique classes. I attempted to overlay text on the image but it is not showing up. I tried using the following CSS code but nothing appeared on the screen. .classnameslide1: ...

htmlwordpresscss

Error: The reference to WEBGL has not been properly defined

Within my HTML, the code snippet below is causing an issue: if (WEBGL.isWebGLAvailable()==false) { document.body.appendChild(WEBGL.getWebGLErrorMessage()); } Upon running this code, the following error appears in the console: Uncaught ReferenceErr ...

javascripthtmlthree.js

Adjust the input dimensions to match the length of the text upon loading

I have a jQuery code that is supposed to test the length of text in an input box when the page loads and adjust the size of the input box accordingly. However, I seem to be encountering some issues with my current approach: $("#emailSubject").attr('s ...

jqueryhtmlinput

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

I've exhausted all my options and still can't crack this puzzle. Let me break it down for you: Upon entering the page, users are greeted with a collection of images each tagged with classes (for example, img01 and img02). When an image is clicke ...

javascriptjquerycssimage

Styling React components using class names

Struggling with implementing a sidebar feature using the guidance provided in this example. However, I am facing difficulty in applying the necessary styles to each className... Here's what I've attempted so far, but unfortunately, no styles see ...

cssreactjs

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...

javascripthtmlseleniumselenium-webdriver

Tips for addressing the issue of button flickering due to CSS transitions

Is there a solution to prevent flickering without compromising the intended design? The issue arises when hovering over a moving or animated element and accidentally un-hovering because it moves beneath the cursor. <!DOCTYPE html> <html> &l ...

htmlcss