Struggling with aligning items vertically in Bootstrap 4?

Question

Struggling with aligning items vertically in Bootstrap 4?

Despite my experience in programming, I am struggling with CSS and HTML. I am attempting to create a simple "Login Page" for my personal web application.

GitHub: https://github.com/n-winspear/cashflow-webapp

After trying various solutions suggested in other threads, such as:
- Adding specific heights to columns, rows, and containers.
- Experimenting with different classes like center-text, justify-content-center, align-self-center, align-items-center.
- Changing container and form types.
- Loading CSS directly from a URL instead of a local file.

<div class="container-fluid">
    <div class="form-row align-items-center">
        <div class="col-sm-4 offset-sm-4">
        <form class="form-signin">
            <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
                <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button> 
        </form>
    </div>
    </div>
</div>

My goal was to have the form centered on the web page, but it remains stuck at the top.

Current layout shown here: https://i.sstatic.net/qUHPJ.png

html css bootstrap-4

Answer 1

Answer №1

I took a copy of your project and implemented some changes, which proved to be successful. To improve your project, follow these steps:

Create a style.css file in your css folder for cleaner code.

Add a link to your new stylesheet in the HTML and assign an id to your container for easy identification in the future, especially if you plan to add more containers. Your final HTML code should resemble this:

<!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type"text/css" href="bootstrap/css/styles.css">

    <title>Cashflow Web App</title>
</head>
<body>
    <div class="container-fluid" id="main-block">
        <div class="form-row align-items-center">
            <div class="col-sm-4 offset-sm-4">
                <form class="form-signin">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button> 
                </form>
            </div>
         </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

In the style.css file, use display:table and display: table-cell. Include the following code:

body{
  height: 100%;
}
#main-block{
   height: 100%;
   display: table;
}

.align-items-center{
   display: table-cell;
   vertical-align: middle;
}

After implementing these modifications, your project should look like this. Feel free to ask any questions if you encounter any issues. View the image here

If you need further assistance, don't hesitate to reach out.

Answer 2

I took a copy of your project and implemented some changes, which proved to be successful. To improve your project, follow these steps:

Create a style.css file in your css folder for cleaner code.

Add a link to your new stylesheet in the HTML and assign an id to your container for easy identification in the future, especially if you plan to add more containers. Your final HTML code should resemble this:

<!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type"text/css" href="bootstrap/css/styles.css">

    <title>Cashflow Web App</title>
</head>
<body>
    <div class="container-fluid" id="main-block">
        <div class="form-row align-items-center">
            <div class="col-sm-4 offset-sm-4">
                <form class="form-signin">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button> 
                </form>
            </div>
         </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

In the style.css file, use display:table and display: table-cell. Include the following code:

body{
  height: 100%;
}
#main-block{
   height: 100%;
   display: table;
}

.align-items-center{
   display: table-cell;
   vertical-align: middle;
}

After implementing these modifications, your project should look like this. Feel free to ask any questions if you encounter any issues. View the image here

If you need further assistance, don't hesitate to reach out.

Answer 3

Answer №2

To vertically center a div, you can employ the absolute position method or utilize Flex on the body container along with VH units. For this scenario, opting for the absolute position would be advisable.

Using Absolute Positioning:

.container-fluid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

With Flex on Body:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Answer 4

To vertically center a div, you can employ the absolute position method or utilize Flex on the body container along with VH units. For this scenario, opting for the absolute position would be advisable.

Using Absolute Positioning:

.container-fluid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

With Flex on Body:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Struggling with aligning items vertically in Bootstrap 4?

Answer №1

Answer №2

Similar questions

Display or conceal certain HTML form elements based on the selection made in the previous form element

Choosing the attribute value using jQuery/CSS

utilizing tabview for component replacement

What is the best way to find a specific class within a CSS file using Visual Studio Code?

Using jQuery Ajax and PHP to retrieve data from a database based on multiple checkboxes

Incorrect legend colors in Highcharts pie chart

Guide to swapping images using HTML forms and JavaScript

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

Instant Access to a Precise Slide

The issue with Angular 4 imports not refreshing in a .less file persists

The process of obtaining HTML input using JavaScript

How to replicate a WordPress menu bar

Element Style Does Not Align with Computed Z-Index

Selecting a language by clicking on it

Manipulating JSON objects within a map using jQuery and Gson

The React sidebar expanded to cover the entire screen width

Tips for eliminating the shadow effect from a textbox using CSS

I am attempting to assign a default value to a TextField by retrieving data from a GetMapping call in React, however, the value is not being successfully set

Create two div elements containing responsive images using HTML and CSS

SQL table not being updated by AJAX request data submission