Bootstrap GRID/Layouts

Question

I'm fairly new to bootstrap and I'm kind of struggling with some of the layout settings. I want to create a centered form with a form of tooltip/box to the right that it's inline with the top of the form box. Below is my current form and I'll attach a photo of what I'm trying to achieve. I've been trying for quite a while but the closest I've come is having it centered in the middle of the page or below the existing form.

What I am trying to achieve: (The orange box)

Current html:

<html lang="en">
<head>
  <title>Stackoverflow</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row my-3">
            <div class="col-1 col-md-2 col-lg-3"></div>
            <div class="col-10 col-md-8 col-lg-6 my-3 border">
                <!-- Form -->
                <form class="border" action="" method="post" class="my-3">
                    <h1>ABC</h1>
                    <h2>Lorem ipsum dolor</h2>
                    <p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
                        Consequuntur qu</p>
                        
                    <!-- Input fields -->
                    <div class="form-group">
                        <label class="sr-only" for="accountNumber">Account number:</label>
                        <input type="text" class="form-control accountNumber" id="accountNumber"
                            placeholder="Account number..." name="accountNumber">
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="email">Email:</label>
                        <input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
                        <small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
                            will need to use it for verification to log in.
                        </small>
                      </div>
                      
                     <div class="alert alert-primary" role="alert">                         <span class="icon oi oi-info"></span>This will be your username
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
                            name="firstName"></label>
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="surname">Surname:</label>
                        <input type="text" class="form-control surname" id="surname" placeholder="Surname..."
                            name="surname">
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="dateOfBirth">Password:</label>
                        <input type="text" class="form-control dateOfBirth" id="dateOfBirth"
                            placeholder="Date of birth..." name="dateOfBirth">
                        <small id="dateOfBirthHelpBlock" class="form-text text-muted">
                            DD/MM/YYYY
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="password">Password:</label>
                        <input type="password" class="form-control password" id="password" placeholder="Password..."
                            name="password">
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="gridCheck">
                            <label class="form-check-label" for="gridCheck">I accept the</label>
                            <span>
                                <a href="#">Terms and Conditions</a>
                            </span>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Signup</button>
                    </div>
                        <!-- End input fields -->
                </form>

                <!-- Form end -->
                </div>
                <div class="col-1 col-md-2 col-lg-3></div>
            </div>
        </div>
</body>

Thanks in advance!

score 1 · Accepted Answer · answered Mar 09 '21 at 06:05

I ended up working through my own solution. To solve my problem I made adjustments to the container holding both the form as well as this new box. As can be seen below.

Solution:

<body>
    <div class="container h-100 mt-5">
        <div class="row h-100 justify-content-center">
            <div class="col-10 col-md-8 col-lg-6 ">
                <!-- Form -->
                <form class="" action="" method="post">
                    <h1>ABC</h1>
                    <h2>Lorem ipsum dolor</h2>
                    <p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
                        Consequuntur qu</p>
                    <!-- Input fields -->
                    <div class="form-group">
                        <label class="sr-only" for="accountNumber">Account number:</label>
                        <input type="text" class="form-control accountNumber" id="accountNumber"
                            placeholder="Account number..." name="accountNumber">
                        <small id="accountNumberHelpBlock" class="form-text text-muted">Check your Welcome Pack or call
                            us 1800 000 000 for help
                        </small>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="email">Email:</label>
                        <input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
                        <small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
                            will need to use it for verification to log in.
                        </small>
                        <div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be
                            your
                            username</div>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="firstName">First Name:</label>
                        <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
                            name="firstName">
                        <small id="firstNameHelpBlock" class="form-text text-muted">This is the name that is shown on
                            your Welcome Pack
                        </small>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="surname">Surname:</label>
                        <input type="text" class="form-control surname" id="surname" placeholder="Surname..."
                            name="surname">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="dateOfBirth">Password:</label>
                        <input type="text" class="form-control dateOfBirth" id="dateOfBirth"
                            placeholder="Date of birth..." name="dateOfBirth">
                        <small id="dateOfBirthHelpBlock" class="form-text text-muted">
                            DD/MM/YYYY
                        </small>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="password">Password:</label>
                        <input type="password" class="form-control password" id="password" placeholder="Password..."
                            name="password">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="password2">Confirm Password:</label>
                        <input type="password" class="form-control password" id="password2"
                            placeholder="Confirm your password..." name="password">
                    </div>
                    <div class="form-group">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="gridCheck">
                            <label class="form-check-label" for="gridCheck">
                                I accept the
                            </label>
                            <span>
                                <a href="#">Terms and Conditions</a>
                            </span>
                            <button type="submit" class="btn btn-primary float-right">Register for access</button>
                        </div>
                        <!-- End input fields -->
                </form>
                <!-- Form end -->
            </div>
        </div>
        <div class="border col-lg-3 box">
            <div class="help1 border-bottom">
                <h4><span class="icon oi oi-question-mark"></span>Need some help?</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi totam vel, cum reiciendis tenetur
                    quia ullam soluta. Praesentium minus explicabo ducimus mollitia dolorum, ipsam tenetur, et
                    voluptatum quae, nostrum atque!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, rem. Incidunt molestiae
                    repellendus
                    et sunt iure perferendis saepe ipsam.
                </p>
            </div>
            <div class="help2 border-bottom">
                <h4 class="mt-2"><span class="icon oi oi-person"></span>Already registered?</h4>
                <a href="#" class="btn btn-light btn-sm btn-block mb-3" tabindex="-1" role="button"
                    aria-disabled="true">Log in
                </a>
            </div>
            <div class="help3">
                <h4 class="mt-2"><span class="icon oi oi-person"></span>You're already a ABC customer?</h4>
                <a href="#" class="btn btn-light btn-sm btn-block" tabindex="-1" role="button" aria-disabled="true">Log
                    in to ABC Internet
                </a>
            </div>
        </div>

        <script>
        </script>

</body>

score 0 · Answer 2 · answered Mar 08 '21 at 07:42

Have a look at the design , you need the same. because, I was doing the same as you have attached the picture. It is showing me the same in all view.

Their is some mistake, I have highlighted below. please read this for the next time.

First, You have to add Bootstrap CDN in HTML File to use bootstrap classes.

Second, Don't forget to close the tags. Their is no closing tag in many places that's why its design was not showing properly.

Try to write code in format so that you know which closing tag is missing.

Third, Their is no need to take .h-100 class in body and every div tag or container it automatically. if anywhere you want to less height then you can use CSS for less height.

<html lang="en">
<head>
  <title>Stackoverflow</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row my-3">
            <div class="col-1 col-md-2 col-lg-3"></div>
            <div class="col-10 col-md-8 col-lg-6 my-3 border">
                <!-- Form -->
                <form class="border" action="" method="post" class="my-3">
                    <h1>ABC</h1>
                    <h2>Lorem ipsum dolor</h2>
                    <p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
                        Consequuntur qu</p>
                        
                    <!-- Input fields -->
                    <div class="form-group">
                        <label class="sr-only" for="accountNumber">Account number:</label>
                        <input type="text" class="form-control accountNumber" id="accountNumber"
                            placeholder="Account number..." name="accountNumber">
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="email">Email:</label>
                        <input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
                        <small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
                            will need to use it for verification to log in.
                        </small>
                      </div>
                      
                     <div class="alert alert-primary" role="alert">                         <span class="icon oi oi-info"></span>This will be your username
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
                            name="firstName"></label>
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="surname">Surname:</label>
                        <input type="text" class="form-control surname" id="surname" placeholder="Surname..."
                            name="surname">
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="dateOfBirth">Password:</label>
                        <input type="text" class="form-control dateOfBirth" id="dateOfBirth"
                            placeholder="Date of birth..." name="dateOfBirth">
                        <small id="dateOfBirthHelpBlock" class="form-text text-muted">
                            DD/MM/YYYY
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label class="sr-only" for="password">Password:</label>
                        <input type="password" class="form-control password" id="password" placeholder="Password..."
                            name="password">
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="gridCheck">
                            <label class="form-check-label" for="gridCheck">I accept the</label>
                            <span>
                                <a href="#">Terms and Conditions</a>
                            </span>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Signup</button>
                    </div>
                        <!-- End input fields -->
                </form>

                <!-- Form end -->
                </div>
                <div class="col-1 col-md-2 col-lg-3></div>
            </div>
        </div>
</body>

Thank you for the advice, these things were only missing because I clipped out the main part of the file. Otherwise my example above wouldn't have worked at all either :) I updated the html in the question regardless so it's easier for anyone who is able to help. — snazzyy, Mar 08 '21 at 21:35
So, tell me your problem is solved or not. Now its working fine or not...? — bharti parmar, Mar 10 '21 at 08:33

Bootstrap GRID/Layouts

2 Answers2