Now I tried classes .pull-right and .float-right to place my radio buttons at the right end. Its not working. Coding and Picture below.
<div class="row ">
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Valid</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
<div class="form-group col-lg-6">
<div class="row">
<label class="Bold">Is Checked</label>
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</div>
</div>
</div>
Screenshot
I want like the below image(just a sample)
You will need to wrap your radio buttons to a div .form-group and use [bootstrap4 flex utilities] classes d-flex justify-content-between to align them
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row ">
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Valid</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
<div class="form-group col-lg-6">
<div class="d-flex justify-content-between">
<label class="Bold">Is Checked</label>
<div class="form-group">
<input class="radio-inline" type="radio">Yes
<input class="radio-inline" type="radio">No
</div>
</div>
</div>
</div>
</div>
You need to include bootstrap.min.css and wrap the radio buttons in <span> and give it float:right
.radio-group{
float:right;
}
.formrow {
margin-right: 0px !important;
margin-left: 0px !important;
}
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row formrow">
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Valid</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
<div class="form-group col-lg-6">
<div class="row formrow">
<label class="Bold">Is Checked</label>
<span class="radio-group">
<input class="radio-inline float-right" type="radio">Yes
<input class="radio-inline float-right" type="radio" >No
</span>
</div>
</div>
</div>
Related
I am using bootstrap V5 and i wanted to center the login button in the div and i am using mx-auto and also tried text-center but none of this is working.
Where am i getting wrong.
<div className='container my-auto w-50' style={{backgroundColor:"#E8D2A6"}}>
<div className="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div className="form-group row">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter user id'/>
</div>
</div>
<div className="form-group row my-3">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter Password'/>
</div>
</div>
<button type='button' className="mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
Try this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container my-auto w-50' style={{background-color:"#E8D2A6"}}>
<div class="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div class="form-group row">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter user id'/>
</div>
</div>
<div class="form-group row my-3">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
</div>
</div>
<div class="form-group row">
<button type='button' class="w-auto mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
</div>
I am creating a form that is wrapped inside a card in bootstrap. It worked fine on my pc. However, my page is unresponsive when it comes to small screens because of it. What is wrong?
The code is too long to paste here but here is the code where the card is:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group row">
<label class="col-form-label col-xs-12 col-sm-2" for="tables">Number of Guests</label>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables1" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables2" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables3" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables4" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables5" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables6" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
<div class="form-group row">
<label for="time" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
'''
P.S. I have no CSS related to it yet.
Your problem is position row and col-*. Then I changed radio button name for same name=tables because if a different name can't changed a pill.
Here an example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-lg-3">
<label class="col-form-label" for="tables">Number of Guests</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="time" class="col-form-label">Date and Time</label>
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.
The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.
The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.
Attached is the code:
<form>
<div class="form-group row">
<label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">3</label>
</div>
<!-- Material inline 4 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">4</label>
</div>
<!-- Material inline 5 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">5</label>
</div>
<!-- Material inline 6 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">6</label>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="section" class="col-12 col-md-2 col-form-label">Section</label>
<div class="form-group row ">
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-3">
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="col-6 col-md-3">
<input type="time" class="form-control" id="time" placeholder="Time">
</div>
</div>
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
I can only suggest you read this page.
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.
For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
I suggest you start with the simpler solution as provided in the link.
A row with 2 columns. See where that gets you.
<div class="row">
<div class="col-sm">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
<div class="col-sm">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Number of Guests
</label>
</div>
<div class="col-md-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">6</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Section
</label>
</div>
<div class="col-md-10">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Date & Time
</label>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<input id="date" class="form-control" type="date">
</div>
<div class="col-6">
<input id="time" class="form-control" type="time">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</form>
I hope this was helpful, best of luck!
So there's a few things as to why these elements aren't aligning properly:
You should never use .row & .col in the same class, instead you should lay them out like so:
<form>
<div class="row">
<div class="col-md-4">
I am a column on the left (4/12)
</div>
<div class="col-md-10">
I am a column on the right (10/12)
</div>
</div>
</form>
Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-md-4">
I am inside of a larger column
</div>
<div class="col-md-10">
So am I!
</div>
</div>
</div>
</div>
It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.
I hope this helps clear a few things up, let me know if you're still a bit stuck.
try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="container-fluid">
<div class="row my-4">
<div class="col-md-2">
<label for="Number of Guests" class="col-form-label">Number of Guests</label>
</div>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline ml-3">
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio3">
<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio4">
<input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="section" class="col-form-label">Section</label>
</div>
<div class="col-md-10">
<div class="form-group ">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="dateandtime" class="col-form-label">Date and Time</label>
</div>
<div class="col-md-10">
<div class="form-group d-flex">
<input type="date" class="form-control col-md-3" id="date" placeholder="Date">
<input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
</div>
</div>
</div>
<div class="row my-4">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
My checkbox is currently aligned like this -
I want to move it to the marked/pointed location below -
I'm using Bootstrap 4. Following is my HTML -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="director">Director</label>
<div class="col-md-8">
<input class="form-control" type="text" id="director" name="director" placeholder="Director">
</div>
</div>
<div class="row form-group form-check">
<div class="col">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="year">Year</label>
<div class="col-md-8">
<input class="form-control" type="text" id="year" name="year" placeholder="Year">
</div>
</div>
As simple as
<div class="row form-group">
<div class="col-md-11 offset-md-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/L1krytub/4/
IMO, I kind of think col-md-1 is not wide enough for your labels though.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps.
HTML:
<section id="cover">
<div id="cover-caption">
<div id="container">
<div class="col-sm-10 col-sm offset-1">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
↓
</div>
</div>
</div>
</section>
CSS:
html,
body{
height: 100%;
}
#cover {
background: #222 url('../img/stars.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
You need to use the various Bootstrap 4 centering methods...
Use text-center for inline elements.
Use justify-content-center for flexbox elements (ie; form-inline)
https://codeply.com/go/Am5LvvjTxC
Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...
<section id="cover">
<div id="cover-caption">
<div id="container" class="container">
<div class="row">
<div class="col-sm-10 offset-sm-1 text-center">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
↓
</div>
</div>
</div>
</div>
</section>
<div class="d-flex justify-content-center align-items-center container ">
<div class="row ">
<form action="">
<div class="form-group">
<label for="inputUserName" class="control-label">Enter UserName</label>
<input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
<small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Enter Password</label>
<input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
</div>
</form>
</div>
</div>
All above answers perfectly gives the solution to center the form using Bootstrap 4. However, if someone wants to use out of the box Bootstrap 4 css classes without help of any additional styles and also not wanting to use flex, we can do like this.
A sample form
HTML
<div class="container-fluid h-100 bg-light text-dark">
<div class="row justify-content-center align-items-center">
<h1>Form</h1>
</div>
<hr/>
<div class="row justify-content-center align-items-center h-100">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<form action="">
<div class="form-group">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" />
</div>
<div class="form-group text-center">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
</div>
<div class="form-group">
<div class="container">
<div class="row">
<div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
<div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Link to CodePen
https://codepen.io/anjanasilva/pen/WgLaGZ
I hope this helps someone. Thank you.