Bootstrap 3 & Boostrap 4 & Bootstrap 5 - Input-Xs (Smaller Than Sm)

Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (smaller than sm)

For inputs smallers:

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

Sample usage in input-group:

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-xs btn-success">
            <i class="glyphicon glyphicon-plus"></i>
        </button>
    </span>
    <input type="text" class="form-control input-xs" />
    <span class="input-group-btn">
        <button class="btn btn-xs btn-danger">
            <i class="glyphicon glyphicon-minus"></i>
        </button>
    </span>
</div>

Alternatively you can add class to the input-group like this one:

.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
    height: 22px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

and use:

<div class="input-group input-group-xs">
    <span class="input-group-btn">
        <button class="btn btn-success">
            <i class="glyphicon glyphicon-plus"></i>
        </button>
    </span>
    <input type="text" class="form-control" />
    <span class="input-group-btn">
        <button class="btn btn-danger">
            <i class="glyphicon glyphicon-minus"></i>
        </button>
    </span>
</div>

.input-xs {

  height: 22px!important;

  padding: 2px 5px;

  font-size: 12px;

  line-height: 1.5;

  border-radius: 3px;

}

.input-group-xs>.form-control,

.input-group-xs>.input-group-addon,

.input-group-xs>.input-group-btn>.btn {

  height: 22px;

  padding: 1px 5px;

  font-size: 12px;

  line-height: 1.5;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group">

  <span class="input-group-btn">

    <button class="btn btn-xs btn-success">

      <i class="glyphicon glyphicon-plus"></i>

    </button>

  </span>

  <input type="text" class="form-control input-xs" />

  <span class="input-group-btn">

    <button class="btn btn-xs btn-danger">

      <i class="glyphicon glyphicon-minus"></i>

    </button>

  </span>

</div>

<br/>

<div class="input-group input-group-xs">

  <span class="input-group-btn">

    <button class="btn btn-success">

      <i class="glyphicon glyphicon-plus"></i>

    </button>

  </span>

  <input type="text" class="form-control" />

  <span class="input-group-btn">

    <button class="btn btn-danger">

      <i class="glyphicon glyphicon-minus"></i>

    </button>

  </span>

</div>

Input size smaller than form-control-sm in bootstrap 4 e.g. xs?

You'd have to go the custom way

A good way can be to cut down other things in addition to cutting down the font size from .875em to .75em; this would include the height, padding too.

  .form-control-xs {

    height: calc(1em + .375rem + 2px) !important;

    padding: .125rem .25rem !important;

    font-size: .75rem !important;

    line-height: 1.5;

    border-radius: .2rem;

}

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">

  <h2>Form Control Sizing</h2>

  <p>Change the size of the form control with .form-control-sm or .form-control-lg:</p>

  <form action="/action_page.php">

    <div class="form-group">

      <input type="text" class="form-control form-control-xs" placeholder="Extra small form control" name="text0">

    </div>

    <div class="form-group">

      <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1">

    </div>

    <div class="form-group">

      <input type="text" class="form-control" placeholder="Default form control" name="text2">

    </div>

    <div class="form-group">

      <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3">

    </div>

  </form>

</div>

Bootstrap smaller input and smaller input-group-addon issue

If I were you, I'd add the class name "input-group" before the "input-group-xs" in order to add the base css.

.input-group {
position: relative;
    display: table;
    border-collapse: separate;
}

So your code should look like this:

<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
  <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
  <span class="input-group-addon">stuk</span>
</div>

Set form-control to the same size as form-control-sm in boostrap 4

Set the appropriate SASS variables from Bootstrap 4...

@import "bootstrap/functions";
@import "bootstrap/variables";

$input-padding-y: $input-padding-y-sm;
$input-padding-x: $input-padding-x-sm;
$input-height: $input-height-sm;
$input-font-size: $input-font-size-sm;

@import "bootstrap";

https://www.codeply.com/go/mHAz7ecNiy

Bootstrap two-row grid issue (the top row is smaller than second)

You have set background to the header element, not the div which has the col-sm class... while for the columns below, you have added a background to the div with the col-sm-9 and col-sm-3 classes

just add a class with your background to the div with the bootstrap class, this way the padding will be included in the background - like below:

.header-parent-div {

  background: #2c3e50;

  color: #fff;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">

  <div class="row">

    <div class="col-sm header-parent-div">

      <header>

        <h1 class="text-center">

          My Title

        </h1>

      </header>

    </div>

  </div>

  <div class="row">

    <div class="col-sm-9" style="background:#e7e1c7;">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.

    </div>

    <div class="col-sm-3" style="background:#a0c9f1;">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.

    </div>

  </div>

</div>

</body>

</html>

Bootstrap: Input field with checkbox breaks for smaller screen sizes

Just remove ml-2 from the checkbox and add mr-2 for input so that the margin-left does not break it.

<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control mr-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="auto">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Сode sample: https://www.codeply.com/go/sQ8jFKLwRe

Bootstrap form : Is there a way to have the .help-block larger than the input field?

This can be done using a different column for the help-block and offsetting the help-block containing div!

Bootply example here

<div class="form-group">
      <label class="col-md-4 control-label" for="username">Username</label>  
      <div class="col-md-5">
        <input id="username" name="username" placeholder="" class="form-control input-md" required="" type="text">
       </div>
        <div class="col-md-8 col-md-offset-4">
      <span class="help-block">A very long explanation, that is longer than the above input field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>  
      </div>
    </div>

Make smaller button in bootstrap

Bootstrap provides four button sizes:

The classes that define the different sizes are:

.btn-lg
.btn-md
.btn-sm
.btn-xs // Removed in Bootstrap 4+

The following example shows the code for different button sizes:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

<div class="container">
  <h2>Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Medium</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>

---

Related Topics