What is the best way to vertically center a row?

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Unique Title</title>
    <link rel="stylesheet" href="custom-reboot.min.css">
    <link rel="stylesheet" href="custom-style.min.css">
    <link rel="stylesheet" href="custom-grid.min.css">
    <link rel="stylesheet" href="new-style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col col-md-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-md-5"></div>
                <div class="right col-md-6">
                    <form>
                        <div class="form-group">
                            <label for="FullName">Full Name</label>
                            <input type="text" class="form-control" id="FullName">
                        </div>
                        <div class="form-group">
                            <label for="PhoneNumber">Phone Number</label>
                            <input type="text" class="form-control" id="PhoneNumber">
                        </div>
                        <div class="form-group">
                            <label for="Address">Address</label>
                            <input type="text" class="form-control" id="Address">
                        </div>
                        <button type="submit" class="btn btn-primary">Primary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-md-3"></div>
    </div>
</div>

</body>
</html>

Tried different approaches as mentioned in the guide, unfortunately, none of them seem to work. Attempted various strategies specified in the documentation, but they all failed.

Answer №1

From my understanding:

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
html, body {
    height: 100%;
}
.container {
    height: 100%;
}
.h-100 {
    border: 1px dotted #cc2222;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <h5 class="text-muted">Vertical &amp; horizontal center using auto-margins..</h5>
    <!--vertical align on parent using my-auto, horizontal align on self mx-auto-->
    <div class="row h-100">
      <div class="col-sm-12 my-auto">
        <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>
      </div>
     </div>
       
</div>

I trust this clarifies things.

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

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

The elements within the flexbox are being truncated when viewed on smaller devices

I have encountered an issue with my code where the .content element, which has flex properties, appears cut off on small screens. I want to avoid setting a fixed size because the text within it may vary in size. The goal is for the background image to fi ...

Minimizing the menu bar while scrolling down (bootstrap3)

Could anyone help me with creating a navigation-bar effect similar to the one seen on ? I want the bar to shrink and the logo to change after scrolling down my page. My website is built using bootstrap 3. Is there a simple way to achieve this effect with ...

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

What is the best way to create a design with an image on the left and text on the right side?

I am trying to create a layout that features an image on the left and text on the right in a specific structure: Item 0: value 0 Item 1: value 1 Item 2: value 2 However, the text is appearing all in one row like this: Item 0: value 0 Item 1: value 1 Ite ...

Exploring the differences between the meta viewport and font size

My website includes the following code in the section: <meta name="viewport" content="width=990"/> This setting helps to display my webpage well on mobile devices, as using width=device-width causes issues with elements that have 100% width. Howeve ...

What steps should I follow to customize the Bootstrap link template according to my requirements?

In the bootstrap documentation, the links are shown in blue by default. I want them to be white instead. How can I make all the links white if the documentation is ignoring my CSS files? ...

Blog Writer: Picture quality compromised when adjusting size

Issue with blurry images after resizing. The problem is noticeable in the three main images located under the Header section. To preview the blog, click on this link: Click Here Your assistance in solving this issue would be greatly appreciated. Thank yo ...

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Trying to create a responsive navigation but encountering issues when following these steps: 1. Resize the navigation to less than 940px 2. Activate the menu 3. Resize the browser again to more than 940px 4. The menu is no longer inline and appears messy ...

Guide on incorporating a bootstrap 4 navigation item into an active class through jquery

I am working on a Jekyll site and I want to dynamically add the Bootstrap 4 class active using JavaScript. I have tried using the following code: $(document).ready(function() { // get current URL path and assign 'active' class var pathna ...

Spin only the outline with CSS

I have a unique idea for my webpage - three spinning circles surrounding text, while the text itself remains stationary. My challenge is to achieve this effect using only CSS, specifically by utilizing the .spinner-border class from Bootstrap. I cannot ma ...

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

Identifying between a webview and browser on an Android device

I need to differentiate between a webview and a browser in Android to display a banner only for users accessing the app via a browser, not through a webview. I've tried using PHP code but it doesn't work as expected. Is there another method to a ...

Div with Navigation Bar

Struggling to create a Nav Bar using Divs and aligning the links side by side? Looking for some guidance on how to achieve this design? Lorem Ipsum placeholder text added here. Lorem Ipsum ad usu quem delectus, sea stet sale id. Nulla nostrud appetere ea s ...

Exciting transition effect for font sizes in CSS

Issue: Hover over the X and wait for the div to collapse completely. Move away from the X Notice how the div jumps to the bottom and then back up. Inquiry: How can I prevent text wrapping while expanding the div during animation? (Currently using del ...

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

Lack of animation on the button

Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...

The number of contents determines the dynamic CSS border style

Could you please assist me in identifying what this design element is called? I have tried searching on Google, but had no luck finding exactly what I am looking for. Here is an example of the look I am aiming for: https://i.sstatic.net/AXUvq.jpg Can so ...

I am looking for a pair of HTML tags that will allow one to be visible while the other is hidden, and then switch when needed

I am in the process of constructing a webpage dedicated to learning Japanese vocabulary. Each word will be presented within a sentence, just like the example shown below. 森林に散歩する take a walk in the forest In order to facilitate the practic ...