CODEWITHSUNDEEP
htmltwitter-bootstrap
Dranyar
Dranyar

Reputation: 610

Using bootstrap why do these label and input controls not show up on the same line

Why would the label and Field (just a wrapper for input) not display on the same line?

I believe that I'm following the simple instructions found here: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp

<div className="container">
    <div className="row">
        <label htmlFor="something" className="col-sm-2 col-form-label">Somethingwefwef</label>
        <Field className="col-sm-10" name="something" type="text" component="input" className="form-control" />
    </div>
</div>

Upvotes: 0

Views: 31

Answers (1)

neophyte
neophyte

Reputation: 6626

your whole mark-up is problematic. Try to follow the tutorial carefully.

You should do it like this

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
           <body>
            <div class="container">
    <div class="row">
        <label For="something" class="col-sm-2 form-label">Somethingwefwef</label>
        <input class="col-sm-10" name="something" type="text"  class="form-control" />
    </div>
</div>
  </body>
  </html>

Upvotes: 1

Related Questions