CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Buckets
Buckets

Reputation: 89

Bootstrap: Input boxes go offscreen when making individual rows

So I wanted to have each input box to be a certain size, I was told I had to make a new row for each one in order to do that. I'm pretty new to bootstrap and coding in general so I'm not sure how to fix this.

I'm using Bootstrap 4, if the version matters..

It worked but for some reason it goes off screen to the left and you can only see half of the input box.

Help would be appreciated.

<!DOCTYPE html>
<html>

<head>
  <h1>Team Selector</h1>
</head>
<form>
  <div class="form-group row">
    <div class="col-xs-3">
    <label for="inputsm">Player 1</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group row">
   <div class="col-xs-3">
    <label for="inputsm">Player 2</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group row">
  <div class="col-xs-3">
    <label for="inputsm">Player 3</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form group row">
  <div class="form-group">
    <label for="inputsm">Player 4</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

</form>



</html>

Upvotes: 1

Views: 734

Answers (2)

Znaneswar
Znaneswar

Reputation: 3387

With Bootstrap4, If you add .row to .form-group it will apply property of row class which is

.row {
margin-right: -15px;
margin-left: -15px;
}

So in your case margin-left: -15px is applying so some part is missing. so to make individual rows try adding col-12 or simply remove row

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group col-12">
    <div class="col-3">
    <label for="inputsm">Player 1</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group col-12">
   <div class="col-3">
    <label for="inputsm">Player 2</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group col-12">
  <div class="col-3">
    <label for="inputsm">Player 3</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form group col-12">
  <div class="form-group">
    <label for="inputsm">Player 4</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

</form>

Upvotes: 1

TouchStarDev
TouchStarDev

Reputation: 441

You have to do some changes in your code like this. copy and paste this code and see. Maybe this helps you. 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
        rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
 <div class="form-group row">
    <div class="col-xs-3">
    <label for="inputsm">Player 1</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group row">
   <div class="col-xs-3">
    <label for="inputsm">Player 2</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form-group row">
  <div class="col-xs-3">
    <label for="inputsm">Player 3</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>

  <div class="form group row">
     <div class="col-xs-3">
    <label for="inputsm">Player 4</label>
    <input class="form-control input-sm" id="inputsm" type="text" 
placeholder="Name here">
    </div>
  </div>
</body>

Upvotes: 0

Related Questions