Tips for aligning an inline form in Bootstrap 5

I am looking to create an inline form with rows. Each row should include an input field that spans 5 columns, along with a button wrapped in content.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b5a9b4">[email protected]</a>/dist/css/bootstrap.min.css">
</head>

<body>
  <div class=""> <!---no aligning--->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!---works well, input takes 5 columns--->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

My issue arises when I try to center the form horizontally and vertically within its parent div using classes like 

d-flex justify-content-center align-items-center h-100
. While this centers the form, the input field no longer spans 5 columns as intended. By coloring the form grey and the parent div black, it is clear that the form does not occupy the entire width anymore.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229352934">[email protected]</a>/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary"> <!---center align--->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!---input doesn't take 5 columns--->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

Seeking guidance on how to properly center this form while maintaining the 5-column input layout. Can you provide assistance?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

It seems to me that making this small modification in the code could be the key to finding a solution. If not, I can explore another approach.

Answer №2

It seems like the issue might be with your parent div container not taking up the full width and height. You can fix this by adding new CSS to your HTML and body elements, setting their height to 100%. Also, don't forget to apply a new CSS class to the parent container with a height of 100%. Here is the updated code:

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b05a110d110c">[email protected]</a>/dist/css/bootstrap.min.css">
  <style>
    html,
    body {
      height: 100%;
    }

    .full-height {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary full-height">
    <form class="bg-dark">
      <div class="row">
        <div class="col-5">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Answer №3

It's effective for me

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a061a07">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous>
</head>

<body>
  <div class="container>
    <form>
        <div class="position-absolute top-50 start-50 translate-middle w-auto row bg-dark justify-content-center>
        <div class="col-5>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" aria-label="Email" aria-describedby="button-email">
        </div>
        <div class="col-auto>
            <button class="btn btn-primary" type="button" id="button-email">Sign in</button>
        </div>
    </div>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a564a57">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous></script>
</body>

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

Toggle child checkboxes when parent checkbox is clicked in angularjs

Can anyone help me figure out how to automatically select child checkboxes when the parent checkbox is clicked? In the code below, I have a parent checkbox in the table header and child checkboxes in the table body. When the parent checkbox is selected, ...

angularjshtml

What is the method of posting to PHP using JavaScript without utilizing Ajax?

My current code involves a drag and drop file uploader to PHP using ajax, but it seems that my web host does not support ajax. Is there an alternative method to achieve this without using ajax? Specifically, I am facing issues with the UploadFile functio ...

phpjavascriptajaxhtml

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

javascripthtmlcss

insert a gap between two elements in the identical line

Is there a way to create spacing between two text fields in the same row? I have tried using margins, paddings, and display flex in the css file but haven't been successful. import "./styles.css"; import TextField from "@material-ui/cor ...

javascriptcssreactjstypescriptmaterial-ui

Eliminate custom CSS generated by themes on WordPress category pages

I am a newcomer to the world of Wordpress and I'm currently in the process of making adjustments to an existing theme. The theme itself is generating custom CSS code and adding it to the wp_head section. add_action('wp_head', 'custom_c ...

phphtmlcsswordpress

Apply a dynamic inline style to the header of an af:column to set the background color

I am facing a challenge where I need to dynamically change the background color of an af:column header. I have experimented with different solutions: Using the headerClass property in the CSS file for af:column does work, but dynamic changes are not poss ...

htmlcssjsforacle-adf

Serving static files in Django

Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...

pythonhtmlcssdjangostatic

Executing a snippet of Bootstrap 5 code under specific circumstances

I need to execute different code blocks based on the window width. When the width is 500px or more, I want to run a specific block of code, and when it's 499px or less, I need another block of code to run. How can I achieve this? For widths of 500px ...

cssbootstrap-4bootstrap-5

The design does not have the capability to scroll

I am currently working on developing an application using Vaadin and Spring Boot. I have successfully set the background of my app by utilizing the following CSS code within the styles.scss file (inside myTheme as specified by Vaadin): .backgroundImage{ ...

csssassvaadin

Why is it necessary to use '!important' to change the color of my navbar?

Hey there! I'm diving into the world of bootstrap, CSS, and HTML for the first time and I'm looking to spice up my navbar by changing the text color. However, I want to achieve this without resorting to the use of "!important". Take a look at my ...

htmlcssbootstrap-4

Get rid of the standard shadow located on the bottom and right of the input text field

My input fields have some border rounding and are displaying an unwanted shadow on the right and bottom. I've tried using the box-shadow property to control the width, color, and other properties of the shadow, but it's not working as expected. H ...

htmlcss

Achieving full white space utilization with inline block elements

When attempting to stack elements on top of each other, I encounter unwanted white space due to varying heights of the elements. I am trying to figure out how to move boxes 6 and 7 up while keeping all corresponding elements beneath them aligned properly. ...

htmlcssflexboxdisplay

Failure to Include jQuery in Header.php File

After adding the jQuery library to header.php, I encountered an issue where index.php was unable to access the library. Surprisingly, when the library was referenced directly from index.php, access to the jQuery library worked without any problems. Here i ...

javascriptphpjqueryhtmlcss

Tips for placing modal box in the exact desired position upon loading

I've been searching for a solution on how to dynamically calculate the position of each image loaded in a Twitter modal box and place the box underneath a custom toolbar element I have created. The situation is depicted in the image. The height of the ...

javascriptjqueryhtmltwitter-bootstrap

Modify the css based on the user's input

<html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <li id="visa"> <section class="credit-card visa gr-visa"> <div class="logo">visa</div> <form> <h2>Payment ...

javascriptjquerycss

Issues with Vue.js v-for functionality causing inconsistencies

Just delving into the world of Vue.js and encountering a hitch. I've been following a tutorial on Laracasts, but my v-for directive seems to be causing some trouble. Here's the HTML: <div id="root"> <ul> <li v-for="name in ...

htmlvue.jsv-for

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

javascriptjquerywordpresshtmlresponsive-design

The current issue with this javascript function is that it is failing to produce any output

function calculateOverallCGPA() { let cumulativeGPA = 0.00; for (let i = 1; i <= semNum; i++) { const GPAforOneSubject = parseFloat(getElementById(`subs${i}`).value); cumulativeGPA += GPAforOneSubject; } const finalCGPA = ...

javascripthtmlfunction

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

htmlangular

JavaScript Animation: Enhancing TextBox Borders

I'm exploring an idea for a loading animation, but I'm feeling a bit lost on where to begin. Basically, I have a text box that gets populated automatically with JavaScript on the page, however, it takes some time to load. I want to create somethi ...

javascripthtmlcssweb