How to Perfectly Align a Div (Form) in Bootstrap 4

As I delve into the realm of Bootstrap, I am faced with a challenge in centering a form on my webpage. I have utilized CSS styling to ensure that both the html and body tags span 100% of the page's height. Additionally, I have created two divs: one outer div that occupies the entire page height and is styled with "justify-content-center," and an inner div styled with "align-items-center" to center the form. While this method successfully centers the form, I am left with unwanted whitespace above and below it.

My query may be somewhat ambiguous, but I seek advice on how to either eliminate this excessive whitespace (such as by adjusting the container size) or explore alternative methods for centering a div.

Currently, I am utilizing jade/pug as my view template engine. Below is the source code snippet:


block content
  div(class="row h-100 justify-content-center")
    div(class="d-flex align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd6d3d4d2d8d3d9fcd9d1ddd5d092dfd3d1">[email protected]</a>", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

Furthermore, here is the layout.jade file from which the code inherits:

doctype html
html(style="height:100%")
  head
    title= title
    link(rel='stylesheet', href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
    script(src="/../node_modules/jquery/jquery.min.js")
    script(src="/../node_modules/popper.js/dist/umd/popper.min.js")
    script(src="/../node_modules/bootstrap/dist/js/bootstrap.min.js")
  body(style="height:100%;background-image:url(../public/images/index-background.jpg);")
    block content

To visualize the issue, refer to this screenshot of the page: screenshot of the page

I would greatly appreciate any insights or suggestions. Thank you for your assistance!

cssbootstrap-4pug

Answer №1

To center the content, simply add the align-items-center class along with the row class.

block content
  div(class="row h-100 justify-content-center align-items-center") /*add align-items-center here*/
    div(class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="711b1e191f151e1431141c10181d5f121e1c">[email protected]</a>", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

I converted Pug HTML into normal HTML and it's working perfectly.

DEMO:

<!DOCTYPE html>
<html lang="en" style="height:100%;">

<head>
  <title>Bootstrap Example</title>
  <meta charset=" utf-8 ">
  <meta name="viewport " content="width=device-width, initial-scale=1 ">
  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "></script>
</head>

<body style="height:100% ">
  <div class="row h-100 justify-content-center align-items-center ">

    <div class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded ">
      <h3 class="text-center ">Submit Your Attendance form
      </h3>
      <form>
        <div class="form-group ">
          <label for="firstname ">First Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br>
        </div>
        <div class="form-group ">
          <label for="lastname ">Last Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br> </div>
        <div class="form-group ">
          <label for="email ">Email</label>
          <input class="form-control " type="text " id="email " placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df7f2f5f3f9f2f8ddf8f0fcf4f1b3fef2f0">[email protected]</a> " name="email "><br>
        </div>
        <div class="text-center ">
          <button type="submit " value="Submit ">submit</button>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

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

Simultaneous display of icon and text on Bootstrap toggle button

Currently, I am utilizing Bootstrap 3 along with Jquery. Within my coding structure, there is a button that holds an icon within a span tag (specifically using the glyphicon provided by Bootstrap). <button id="swapArchived" class="btn btn-default btn-s ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Converting external CSS styles to inline CSS within .NET

Can anyone recommend a tool for converting external CSS to inline CSS? I need the final HTML for email and PDF generation. ...

.netcss

CSS files not loading on live-server

My HTML file is linked to a CSS file, but the CSS doesn't seem to load when I use live-server. Interestingly, the CSS works perfectly fine when I directly open the HTML file in a browser. The CSS file is located outside the directory where my HTML fi ...

htmlcssnpmpackage.jsonnpm-live-server

Adjustable Footer Size with Minimum Size Constraint

On my webpage, I have a footer that is not fixed in place. Currently, the page's content does not require scrolling, and the footer occupies about 25% of the browser window at full screen on a 1920 x 1080 display. The footer's contents are aligne ...

javascriptjqueryhtmlcss

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

javascriptcsstextwarningsphaser-framework

Click-triggered Animation of Glyphicon

I'm attempting to create an animation for a glyphicon-refresh icon that rotates when clicked. I've been trying to achieve this effect using CSS3, but haven't had much success. Below is the code I've used: <a id="update" href="#"> ...

javascriptjquerytwitter-bootstrapcss

Enabling scrolling for a designated section of the website

Example Link to Plunker <clr-main-container> <div class="content-container"> <div class="content-area"> <div class="row"> <div class="col-xs-9" style="height:100%; border-right: 1px solid rgb(204, 204, 204); padding-ri ...

htmlcssangularbootstrap-4

What is the best way to automatically populate the date and time fields in PHP MySQL without manual input?

Is there a way to automatically populate these two input fields without any manual input? <input type="time" name="Time" id="Time" value="" /> I am looking for a solution to automatically fill the date and ti ...

javascriptphphtmlcssmysql

What is the best way to add prefixes to my SCSS style sheets?

After attempting to add prefixes to my scss files, I came across the autoprefixer tool. However, I discovered that it only supports CSS files. Is there a way to utilize autoprefixer with scss files? Here are the commands for Autoprefixer: npm install post ...

javascripthtmlcssangularsass

Which is better for decorating logo text - CSS3 or Jquery?

I've been attempting to achieve this design using CSS without much success. The goal is for the entire logo to scale using fittext.js while looking visually appealing. However, I keep encountering obstacles that prevent me from achieving my desired re ...

javascriptjquerycss

Changes made to the main.css file were erased when running gulp install within the JHipser project

Just diving into the world of jhipster. I recently included a new css property in the main.css file and referenced it in the home.html. However, after executing the gulp install command, that modification vanished from the main.css. Is there a way to ret ...

cssangularjsjhipster

How can I center-align images in WordPress?

I've been encountering an issue with my blog on Wordpress. Lately, whenever I try to add images to my articles and align them in the center while writing the post, they appear centered in the draft but end up left-aligned once the article is published ...

htmlcsswordpress

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

Can PHP be incorporated with vBulletin seamlessly?

I am looking to seamlessly integrate vBulletin into a PHP page. I don't want to create a skin that simply matches the site's appearance, but rather have the forum fully integrated with the site. Of course, the skin would need to be modified to ma ...

phpjavascripthtmlcssvbulletin

What is the process for setting a dynamic layout in a Jade template for Node.js/Express 3.0?

Having some trouble with setting the layout for my index.jade file. I have layoutA.jade, layoutB.jade and index.jade and want to programmatically choose which layout index.jade will extend. I attempted to use this code: app.set('view options', ...

node.jsexpresspug

Avoiding line wrapping can be achieved by hiding elements using the d-none class from Bootstrap

During the development of a responsive website, I encountered an issue with the topbar menu. The menu contains numerous options, which is ideal for larger screens. However, on smaller viewports like cellphones, the buttons start wrapping rather than fittin ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Nested Dropdown Menus

I am facing an issue. I am trying to include an Our Pick dropdown menu inside the Games dropdown menu, but for some reason, the code is not working. Can someone please help me identify the problem? <div class="collapse navbar-collapse" id=&q ...

htmltwitter-bootstrapbootstrap-4

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

jquerycss

Assistance needed: Creating a container with a rounded table design using CSS and HTML

Does anyone have suggestions or a demonstration of how to design a css-based bubble container in html? I am interested in creating a soft table with rounded corners. Essentially, I want the end result to resemble a table but with curved edges, and it woul ...

htmlcss

How can I create a fixed-top navbar with CSS that sticks when scrolling?

Having two top navbars on a single page can be tricky. One is fixed in its position, while the other is sticky. But when scrolling down, the sticky navbar fails to stay on top of the fixed one: https://i.sstatic.net/4mUAZ.png Furthermore, as you scroll d ...

htmlcssbootstrap-4