Creating a responsive div class that is centered

Question

Creating a responsive div class that is centered

Struggling to center my <div class="loginfeld"> while keeping it responsive.

<html>
    <body>
        <div class ="loginfeld"> 
        <div class="container">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="jumbotron">

                    <center><h1>Hello!</h1></center>
                    <br>

                    <form action="login.php" method="POST">
                    <div class="form-group">
                    <input type="text" class="form-control" name="username"
                    placeholder="Enter Username">

                    </div>

                    <div class="form-group">
                    <input type="password" class="form-control" name="password"
                    placeholder="Enter Password">

                    </div>

                    <button type="submit" class="btn
                    btn-primary form-control" name ="login">Login</button>
                    <center><p><?php echo $message; ?></p></center>
                    </form>
                </div>
            </div>
            <div class="col-lg-4"></div>    
        </div>
        </div>
    </body>
</html>

In my CSS style file:

.loginfeld{
    margin-top: 250px;
    margin-left: 750px;
    max-width: 1000px;
}

Currently, it is centered on the screen but lacks responsiveness. Attempts to use forum-suggested codes for responsive centering have not been successful.

After implementing the code suggested by K_LUN, it is now correctly centered but the login box layout is distorted. https://i.sstatic.net/0fDFB.png

html css bootstrap-4

Answer 1

Answer №1

Utilizing Bootstrap's vast array of classes allows you to accomplish your desired layout with minimal need for custom CSS.

I have removed the extra col-lg-4 from both the beginning and end of the container, while also introducing a row div since col-* classes should only be contained within a row.

Following this adjustment, simply add justify-content-center to the row for center alignment of the element. Additionally, include align-items-center along with a custom property of height: 100vh to ensure the row spans the full height of the viewport.

.full-scrn {
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row justify-content-center align-items-center full-scrn">
      <div class="col-10 col-md-8 col-lg-4">
        <div class="jumbotron">

          <center>
            <h1>Hello!</h1>
          </center>
          <br>

          <form action="login.php" method="POST">
            <div class="form-group">
              <input type="text" class="form-control" name="username" placeholder="Enter username">

            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="password" placeholder="Enter password">

            </div>

            <button type="submit" class="btn btn-primary form-control" name="login">Login</button>
            <center>
              <p>
                <?php echo $message; ?>
              </p>
            </center>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

Utilizing Bootstrap's vast array of classes allows you to accomplish your desired layout with minimal need for custom CSS.

I have removed the extra col-lg-4 from both the beginning and end of the container, while also introducing a row div since col-* classes should only be contained within a row.

Following this adjustment, simply add justify-content-center to the row for center alignment of the element. Additionally, include align-items-center along with a custom property of height: 100vh to ensure the row spans the full height of the viewport.

.full-scrn {
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row justify-content-center align-items-center full-scrn">
      <div class="col-10 col-md-8 col-lg-4">
        <div class="jumbotron">

          <center>
            <h1>Hello!</h1>
          </center>
          <br>

          <form action="login.php" method="POST">
            <div class="form-group">
              <input type="text" class="form-control" name="username" placeholder="Enter username">

            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="password" placeholder="Enter password">

            </div>

            <button type="submit" class="btn btn-primary form-control" name="login">Login</button>
            <center>
              <p>
                <?php echo $message; ?>
              </p>
            </center>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 3

Answer №2

If you're unsure whether you want the element to be positioned at the exact center of the screen (from left, right, top, bottom) or just the horizontal center, here's how you can achieve the latter:

To horizontally center the element, you can use the following CSS:

.parent-element{
            background: lightblue;
            width: 300px;
            height: 300
        }
        .centered-element{
          margin: auto;
          width: 200px;
          height: 200px;
          background: cyan;
          text-align: center;
          margin-top: 10px;
          margin-bottom: 10px;
        }

<div class="parent-element">
          <div class="centered-element">
              Sample Text
          </div>
        </div>

Answer 4

If you're unsure whether you want the element to be positioned at the exact center of the screen (from left, right, top, bottom) or just the horizontal center, here's how you can achieve the latter:

To horizontally center the element, you can use the following CSS:

.parent-element{
            background: lightblue;
            width: 300px;
            height: 300
        }
        .centered-element{
          margin: auto;
          width: 200px;
          height: 200px;
          background: cyan;
          text-align: center;
          margin-top: 10px;
          margin-bottom: 10px;
        }

<div class="parent-element">
          <div class="centered-element">
              Sample Text
          </div>
        </div>

Answer 5

Answer №3

To ensure a column stays centered, grid offsets can be utilized:

<div class="container">
  <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <h1 class="text-center">Hello!</h1>

      <form action="login.php" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" name="username" placeholder="Enter username">

        </div>

        <div class="form-group">
          <input type="text" class="form-control" name="password" placeholder="Enter password">

        </div>

        <button type="submit" class="btn
                    btn-primary form-control" name="login">Login</button>
          <p class="text-center">
            <?php echo $message; ?>
          </p>
      </form>
    </div>
  </div>
</div>

Demo

Key points to note:

Utilize text-center instead of extra markup for centering content
Avoid line breaks for spacing and utilize CSS for styling (
```
.jumbotron h1 {margin-bottom: 20px;}
```
)

Answer 6

To ensure a column stays centered, grid offsets can be utilized:

<div class="container">
  <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <h1 class="text-center">Hello!</h1>

      <form action="login.php" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" name="username" placeholder="Enter username">

        </div>

        <div class="form-group">
          <input type="text" class="form-control" name="password" placeholder="Enter password">

        </div>

        <button type="submit" class="btn
                    btn-primary form-control" name="login">Login</button>
          <p class="text-center">
            <?php echo $message; ?>
          </p>
      </form>
    </div>
  </div>
</div>

Demo

Key points to note:

Utilize text-center instead of extra markup for centering content
Avoid line breaks for spacing and utilize CSS for styling (
```
.jumbotron h1 {margin-bottom: 20px;}
```
)

Creating a responsive div class that is centered

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for creating instant notifications using AJAX, PHP, and MySQL?

Navigate through the items in my subnavbar by scrolling the content

AJAX code fetching dynamic content without relying on file loading

Updating the text box's font color to its original black shade

Error in Cordova Android Compilation ("unable to locate Build Tools version 24.0.1")

Conceal or style the filter panel in a DT datatable

Is it a mistake in the Jquery logic or a syntax error?

What is the method for creating a beveled text effect using CSS?

PHP: Link to logo in different folder by including 'nav.php'

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

Executing a PHP script to initiate a ping transmission

Create an HTML button with dual functionality

Misplacement of HTML head tags

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

How to use Javascript to pause an HTML5 video when closed

Inconsistent alignment and formatting of fields in Bootstrap jQuery form

Looping through color transitions upon hover using CSS

Customizing the appearance of jQuery accordion components

Applying CSS blur filter to container without affecting its content

The 'data-intro' property cannot be bound to the button element as it is not recognized as a valid property