htmlcssbootstrap-grid

Bootstrap GRID/Layouts

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)

enter image description here

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!

Solution

  • 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>