Align a text box and button in the center with precision using Bootstrap 5

Here is the code snippet using bootstrap 5:

<div style="margin-top: 30%" class="text-center">
    
    <h1>Let's get started...</h1>

    <input id="form-input" style="display: inline-block;" type="text" class="form-control mb-3 w-25" placeholder="Search for a prefix" />

    <button id="form-button" type="submit" class="btn btn-primary btn-lg">Find Numbers</button>

</div>

When viewed in a browser, it looks like this:

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

I want to ensure that both elements are the same height and that if the browser window is resized too small, the submit button will move below the input field.

cssbootstrap-5

Answer №1

Sorry if my response is off the mark, as I'm not entirely clear on your objective. One helpful solution might be to utilize screen.width in order to adjust the layout of the submit button below the input field.

let width = screen.width;
if(width > // specify desired number) {
    document.getElementById('form-input').style = 'display: block; margin-left: X px'
}

To maintain consistent height, you can explore using position: relative; along with position: absolute:

div {
    positon: relative;
}

input,
button {
    positon: absolute;
    top: 0;
}

I hope this guidance proves beneficial.

Answer №2

To make them flexible, you should enclose them in a flex parent element like so:

<div style="margin-top: 30%" class="text-center">
<h1>Let's begin...</h1>
<div class="d-flex justify-content-center flex-wrap">
  <input id="form-input" style="display: inline-block;" type="text" class="form-control" placeholder="Enter prefix to search" />
  <button id="form-button" type="submit" class="btn btn-primary btn-lg">Search Numbers</button>
</div>

Make adjustments for smaller screens by changing the width (consider using col-lg-* but since form-control has 100% width):

.form-control {
  width: 25%;
}
@media(max-width: 767px) {
  .form-control {
     width: 80%;
     margin-bottom: 20px;
  }
}

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

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

Adding spacing to Bootstrap Navbar

My bootstrap top navigation bar appears as shown below: https://i.sstatic.net/llqGh.png When I hover over each of the items labeled LOREM, it changes to this: https://i.sstatic.net/yGAd8.png How can I adjust my code so that the spac ...

htmlcssbootstrap-4frontend

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

cssnode.jsreactjsfirebasenpm

Creating a line break in HTML using Bootstrap

Reference the source provided, specifically the red alert option. Here is an example: <div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong> ...

htmlcsstwitter-bootstrap

Arranging the form fields on top of an image

Check out the code I've been working on here. I'm facing an issue where the text disappears when I try to position it next to an image. Is it possibly going behind the image? Thank you for your assistance and time. ...

htmlcssimagepositioning

Balancing heights with jQuery

Is there a way to set the height of an h3 element based on the tallest version of its siblings, but only for certain elements? I have a list where CSS organizes items into rows of 3. The last li element in each row has the class "endRow". I want to find t ...

jquerycssheight

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Having trouble with Vue.js 2.5+ and Webpack 4+ not loading CSS files?

I am currently in the process of setting up a Vue project with webpack 4 enabled using the Microsoft SPA templates dotnet core as the base. Everything seems to be working fine, except for the fact that external CSS files are not loading into the project. I ...

csswebpackvue.js.net-core

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

cssreactjs

Displaying a box with a question mark using Glyphicon and Font Awesome icons

I'm having a problem with my website not displaying the Glyphicons or Font Awesome Icons. When I enter the code, it shows up like this: http://prntscr.com/8qwwmd. This is the first time I've encountered this issue and it's only affecting som ...

htmlcssfont-awesomeglyphicons

What is the best way to center my image on a webpage without having it overlap with the text using HTML and CSS?

I'm struggling to center and make my image responsive without causing text overlap. How can I resolve this issue? Check out the problem here div.shadow { position: absolute; max-width: 45%; max-height: 45%; top: 50%; left:50%; ...

htmlcss

Tips for creating inline links

Data is taken from a table using $number and printed as follows: echo "<div class='pagination'><a href='page_pagination.php?number=". $number ."' > ". $number ." </a></div>"; The output does not display in one ...

phphtmlcss

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

javascripthtmlcss

What could be the reason for the malfunction of the nav-tab and tab-pane components?

I'm currently having an issue with my nav-tab and tab-pane implementation. While the nav-tab is working fine, the tab pane does not display the correct content when I click on a second tab. As a beginner in using Bootstrap, I am looking for advice on ...

javascriptjqueryhtmlcssbootstrap-4

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

htmlcsstwitter-bootstrapangularangular-material2

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

Currently, I am attempting to showcase the data retrieved from the following URL: . My objective is to format the parsed data with a specific style. However, I have encountered difficulties accomplishing this using `window.open()`. Any assistance in resolv ...

javascriptjqueryhtmlcss

Creating a slender arrow placed inside a circular div using CSS

I'm currently working on designing a slim right-facing arrow using CSS. So far, I've successfully created the circular div, but I'm struggling with creating the arrow itself. <div class="circleBase type2"></div> I've set ...

htmlcsscss-shapes

Organize icons within a container that spans the entire height

I am looking to organize multiple icons within a container that spans the entire height of the website, rather than just the viewport. Currently, I am only able to achieve the height of the viewport using the following code: .full-container { posit ...

htmlcss

Center the ordered list using margin:auto

Does anyone know how to properly set margin-auto on an ordered list? I'm having trouble with it in a complex setup. Unfortunately, I can't create a fiddle for demonstration purposes, but you can see the problem here. I want the ordered list on t ...

csshtml-listsmargin

When a specific height threshold is surpassed, the sticky element loses its stickiness

Having trouble with implementing a sticky header? Here's a simplified version of the code: HTML: <div class="page"> <div class="header"> kkk </div> <div class="nav"> kkk </di ...

htmlcsspositioncss-gridsticky