snazzyy
Reputation: 151
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)
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!
Upvotes: 1
Views: 87
Answers (2)
snazzyy
Reputation: 151
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>
Upvotes: 1
bharti parmar
Reputation: 434
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>Upvotes: 0
Related Questions
- How to properly use bootstrap grid?
- HTML Bootstrap Grid Layout Horizontal
- How do I get the desired grid layout in bootstrap
- Bootstrap grid custom layout
- Basic 3 grid layout html/css
- Grid layout for Bootstrap
- Layout Grid With Bootstrap
- Bootstrap grid system layout
- Bootstrap v3.2.0 Grid system layout
- Grid layout using Bootstrap 3.0