To fully grasp the functionality of the bootstrap grid system, it is essential to have a clear understanding of how it operates. I recommend checking out the following link for a detailed study on Bootstrap:
If you are interested in learning about Bootstrap 3, click on the link below to explore examples of the Bootstrap 3 grid system.
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
If your focus is on studying Bootstrap 4 instead, follow the link provided to delve into the Bootstrap 4 grid system.
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
Additionally, familiarizing yourself with media queries will significantly enhance your ability to design responsive layouts. Visit the link below to understand media queries and breakpoints.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Incorporating the code snippet below can assist you in aligning your layout with the image provided. Feel free to run the code to see the effects:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 text-center">
<p>1234567</p> <!---- not responsive-->
<p>123456789012345 there is difference between knowing
the path and walking the path</p> <!-- responsiveness -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 reg_form">
<form class="text-center">
<h4> Registration </h4>
<input type="email" class="form-control" placeholder="Email" required>
<input type="password" class="form-control" placeholder="Enter Password" required>
<input type="password" class="form-control" placeholder="Confirm Password" required>
<input type="checkbox"> I agree. <br>
<input type="submit" class="btn btn-info">
</form>
</div>