CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4twitter-bootstrap-form
Joseph
Joseph

Reputation: 7755

Make Label Beside Input in Bootstrap 4

How can i make the label just beside the input form? I've tried anything possible but it doesn't work. Please check my code below.

  <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label>Type</label>
          <input type="email" placeholder="Email Address" class="form-control">
        </div>
        <div class="form-group">       
          <label>First Name</label>
          <input type="password" placeholder="Password" class="form-control">
        </div>
      </form>
  </div>

css

div.form-group{
display: inline;}

Upvotes: 2

Views: 9287

Answers (3)

Kenneth
Kenneth

Reputation: 2993

Try this one dude. Try to run snippet in full page.

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
      <h4>Modal Example with inline form</h4>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    
            </div>
            
                <div class="col-sm-10 col-sm-offset-2">&nbsp;</div>
                <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-success" data-dismiss="modal">Submit</button>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>

Upvotes: 0

yeyene
yeyene

Reputation: 7380

Check out this demo: https://jsfiddle.net/DTcHh/37489/

Bootstrap already have Horizontal form feature, check here https://getbootstrap.com/docs/3.3/css/#forms

HTML

<div class="container">
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
        </form>
    </div>
</div>

Upvotes: 0

DunDev
DunDev

Reputation: 200

You can use form-inline for each form-group

<div class="modal-body">
  <form class="form-horizontal">
    <div class="form-group form-inline">
      <label>Type</label>
      <input type="email" placeholder="Email Address" class="form-control">
    </div>
    <div class="form-group form-inline">       
      <label>First Name</label>
      <input type="password" placeholder="Password" class="form-control">
    </div>
  </form>

Upvotes: 9

Related Questions