Creating a dynamic layout with Bootstrap 4 featuring a full-page design, two columns, and a

For a simple "login" page, I came across this template:

HTML:

<div class="d-flex align-items-center flex-column justify-content-center h-100 bg-dark text-white" id="header">
    <h1 class="display-4">Hello.</h1>
    <form>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Email" type="text">
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="text">
        </div>
        <div class="form-group">
            <button class="btn btn-info btn-lg btn-block">Sign In</button>
        </div>
    </form>
</div>
<div class="container" id="content">
    <div class="row h-100 mt-5">
        <main class="col-md-6">
            <h1>Content...</h1>
        </main>
    </div>
</div>

CSS:

body,html {
    height: 100%;
}

The layout is great and easy to adjust, but I want the "Hello." to be centered both vertically and horizontally on the left-hand side, taking up 9/12 of the space, with the form taking the remaining 3/12.

When I try to separate the columns, I lose the full screen. Another issue is replacing the "Content..." with a permanent footer taking up approximately 15% of the page.

I have a rough idea of the design I want, which you can see in this MS Paint sketch: https://i.sstatic.net/LVbp4.png

I envision this as a non-scrollable page.

Thank you for your help and suggestions!

Answer №1

there appears to be a conflict with the h-100 class on the #content, potentially affecting the layout of your actual page.

To resolve this issue, consider the following code snippet:

/* add missing or remove extra classes */

.screen {
  min-height: 100vh;
  /* consider using height or h-100 if already applied to html & body */
  margin: 0;
}

.flex-grow-4 {
  flex-grow: 4;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="screen d-flex flex-column">
  <div class="d-flex align-items-center justify-content-center flex-grow-4 bg-dark text-white" id="header">
    <h1 class="display-4 col-sm-4 col-md-9 text-center">Hello.</h1>
    <form class="col-md-3 col-sm-6 p-5">

      <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Email" type="text">
      </div>
      <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Password" type="text">
      </div>
      <div class="form-group">
        <button class="btn btn-info btn-lg btn-block">Sign In</button>
      </div>

    </form>
  </div>
  <div class="container flex-grow-1" id="content">
    <div class="row mt-5">
      <main class="col-md-6">
        <h1>Content...</h1>
      </main>

    </div>
  </div>

</div>

Additionally, you can remove the col-xx-xx classes and set a maximum/minimum width for the form element:

/* add missing or remove extra classes */

.screen {
  min-height: 100vh;
  /* consider using height or h-100 if already applied to html & body */
  margin: 0;
}

.flex-grow-4 {
  flex-grow: 4;
}

.minW-10em {
  min-width: 10em;
}

.maxW-25em {
  max-width: 25em;
}

/* additional styles for the login page */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="screen d-flex flex-column">
  <div class="d-flex align-items-center justify-content-center flex-grow-4 bg-dark text-white" id="header">
    <h1 class="display-4 col flex-grow-1 text-center">Hello.</h1>
    <form class="p-5 minW-10em maxW-25em">
      <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Email" type="text">
      </div>
      <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Password" type="text">
      </div>
      <div class="form-group">
        <button class="btn btn-info btn-lg btn-block">Sign In</button>
      </div>

    </form>
  </div>
  <div class="container flex-grow-1" id="content">
    <div class="row mt-5">
      <main class="col-md-6">
        <h1>Content...</h1>
      </main>

    </div>
  </div>

</div>

Answer №2

give this a shot

<div class="row d-flex justify-content-around">
<h1 class="display-4 col-6">Hey there.</h1>
<form class="col-6">
    <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Email" 
         type="text">
    </div>
    <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Password" 
        type="text">
    </div>
    <div class="form-group">
        <button class="btn btn-info btn-lg btn-block">Log In</button>
    </div>
</form>
</div>

Answer №3

body,html {
    height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container col-12 d-flex justify-content-center align-items-center flex-row justify-content-center h-100 bg-dark text-white" id="header">
    <div class="col-9 d-flex justify-content-center">
        <h1 class="display-4">Greetings!</h1>
    </div>
    <div class="col-3 d-flex justify-content-center">
        <form>
            <div class="form-group">
                <input class="form-control form-control-lg" placeholder="Email" type="text">
            </div>
            <div class="form-group">
                <input class="form-control form-control-lg" placeholder="Password" type="text">
            </div>
            <div class="form-group">
                <button class="btn btn-info btn-lg btn-block">Log In</button>
            </div>
        </form>
    </div>
</div>
<div class="container" id="content">
    <div class="row h-100 mt-5">
        <main class="col-md-6">
            <h1>Content Area.</h1>
        </main>
    </div>
</div>

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

Skip the loading screen and directly retrieve meshes from the GWT server

I have a unique challenge with my animated models, each ranging from 5Mb to 8Mb in size. Downloading them individually can be time-consuming, especially when I need them on demand rather than preloading them in libGdx. While I am experienced with both GWT ...

Incorporate various WebGrids with distinct styles on a single page without repetition

Essentially, I have my code within the view and I'm trying to avoid duplicating WebGrid instances. Model Overview public class UsersWithDetailsModels { public IEnumerable<ApplicationUser> ApplicationUsers { get; set; } public IEnumerab ...

Guide on how to save the selected user option in a PHP form

I'm having trouble getting the form to automatically set itself based on the state selected by the user from a drop-down menu of 50 states. The user's info, including their chosen state, is stored in an info array with $state. Everything else dis ...

What is the best way to display two tables together using inline styling?

I attempted to display 2 tables inline by setting their display property to inline, but unfortunately, it did not work as expected. Is there a more straightforward way to achieve the desired inline display for these tables? table { display: inline; } ...

Is it possible to leverage React/Next.js for dynamically adding HTML content based on element IDs when integrating with Netlify forms?

Sorry if this question has already been addressed somewhere. I've spent hours searching and troubleshooting without success. I'm still in the process of learning React, as it's a new concept to me. I just need to implement it for a contact ...

Troubleshooting the Full Height Feature for Sidebar (Panel) in Twitter Bootstrap

I'm having issues with the Sidebar (Panel) in Twitter Bootstrap. I'm encountering some trouble with how it is displayed. Below is the CSS code I am using for the sidebar: .sharecartside .content { height: 100% !important; min-height: 10 ...

Is there a way to determine whether my CSS style modifications will impact other web pages?

Managing a team of junior developers has its challenges, especially when they unknowingly make CSS style changes that impact multiple pages on our website. Is there a tool or method available to alert them that modifying the color of a specific class will ...

"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. ...

The issue of Bootstrap modals failing to show content when a button is clicked within the Django Framework

My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...

Instructions for converting a MySQL select statement within a foreach() loop into an HTML form

I'm in the process of developing a course registration system for a small project. Currently, I have a table named 20182019carryovertbl from which I successfully select students who are carrying over their courses. Now, I need to transform this select ...

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

Optimal methods for arranging images in a list with CSS

I am trying to create a grid layout for a list of images using CSS. Here is the HTML code I have: <ul id='feat-products'> <li><img id='feat-product-1'></li> <li><img id='feat-product-2&apos ...

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

Recently delving into jquery, I attempted to dynamically add an input field to a parent div on button click, but encountered some difficulties. Specifically, my goal was to insert a div with an input element into the parent div identified by the id "join ...

Displaying React components using Bootstrap in the navigation bar

I'm feeling a little stuck here. I'm currently working with React Bootstrap and the Navigation component. One of the routes in my application is the dashboard, which is only accessible after logging in. When a user navigates to the dashboard, I ...

Steps for accessing registration form data once the signup button has been clicked

Hello everyone! I have a code that includes login and registration forms as tabs. When we click on either one, it goes to the respective form. Now, I want to make a change by removing the Register tab and adding it as a signup button next to the login butt ...

A div set to absolute positioning and a width of 100% will exceed the boundaries of a Bootstrap 4

I am attempting to position a div with 100 percent width within a Bootstrap 4.1 col using absolute positioning in order to attach it to the bottom. However, I am encountering an issue where it overflows on the right side of the screen. I have tried assigni ...

Can the navigation bar be filled automatically with content that corresponds to the anchors found within the content?

Currently, I am utilizing a Bootstrap frontend for the project at hand. The task I am tackling involves a significant amount of automatically generated content and code, which greatly simplifies the work process. My goal is to explore the potential of cre ...

Extra horizontal spacing in CSS

Struggling to eliminate the excess horizontal space on my HTML/CSS page. Any thoughts on what might be causing this? Appreciate any help! ...

Techniques for parsing a String in Objective-C

I am looking to parse a string to replace certain elements within it. If the string contains an <ol> tag, I want to specifically focus on replacing the <li> elements with numbers. I understand that I can utilize the rangeOfString method to c ...