creating Horizontal Form in Bootstrap 4

Admin 1
Viewed 16212

I am a beginner in Bootstrap and i am working on styling forms with bootstrap. I am trying to create a horizontal form using form-horizontal class of bootstrap BUT label and textfield are not displayed in same horizontal line.

I have seen a tutorial about it and i copied the same exact code from that tutorial but it didn't work for me whereas it worked for the instructor of the tutorial.

Need help figuring out the problem

Here's the relevant code codepen link

<div class="row">
        <div class="col-sm-6">

          <form class="form-horizontal">

            <div class="form-group">
              <label class="col-sm-4 control-label">First Name</label>
              <div class="col-sm-8">
                <input type="text" class="form-control"/>
              </div>
            </div>

          </form>

      </div><!--end of column-->
</div><!--end of row-->
bootstrap-4
1 Answers

.form-horizontal class has been dropped in Bootstrap 4, you can have a look to the new syntax for horizontal forms here

Here is an Example of horizontal form, also copied it here for quick demo purpose.

<!DOCTYPE html>
<title>My Example</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
body {
padding-top: 1em;
}   
</style> 
 


<div class="container">
<form action="/#">
<div class="form-group row">
<label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group row">
<div class="offset-xs-3 col-xs-9">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})

$("form").submit(function(e) {
  e.preventDefault();
});
</script>

Migration instructions to bootstrap 4 are listed here

user_13345610
Related