Open In App

Bootstrap-5 Forms

Last Updated : 06 Jul, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

Form controls: <input>, <select>, <textarea> are the tags used for general appearance like input field, select item and textareas.     

Note: To make the user interface more presentable, use properties like padding, margins as per the need.

Example: 

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <form>
        <h2 class="text-center">
            Display Form Controls
        </h2>
        
        <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control"
                placeholder="[email protected]">
        </div>
        <div class="form-group mt-2">
            <label>Example select</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="form-group mt-2">
            <label>Example textarea</label>
            <textarea class="form-control"></textarea>
        </div>
    </form>
</body>

</html>

Output:

Notes:

  • The class used for form control is .form-control.
  • The size of form-control can be adjusted by using .form-control-lg and .form-control-sm 

Example:

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <input class="form-control mt-3 form-control-lg"
        type="text" placeholder=".form-control-lg">

    <input class="form-control mt-3" type="text" 
        placeholder="Default input">

    <input class="form-control mt-3 form-control-sm" 
        type="text" placeholder=".form-control-sm">
</body>

</html>

Output:

 
  • The file input type can be defined with class  .form-control-file

Example:

HTML 
<!DOCTYPE html>
<html>

<head>

    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <form>
        <div class="form-group">
            <label>Example file input</label><br>
            <input type="file" class="form-control-file">
        </div>
    </form>
</body>

</html>

Output:

  • The range input type can be defined with class .form-control-range

Example:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Input Range</title>

    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <form>
        <div class="form-group">
            <label>Example Range input</label><br>
            
            <input type="range" 
                class="form-control-range">
        </div>
    </form>
</body>

</html>

Output:

2. Radios and checkboxes: The classes used for radios and checkboxes are .form-check.

Example:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Radios and CheckBoxes</title>

    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <form>
        <div class="form-check">
            <input class="form-check-input" 
                type="checkbox">

            <label class="form-check-label">
                Default checkbox
            </label>
        </div>
        
        <div class="form-check">
            <input class="form-check-input" 
                type="radio">

            <label class="form-check-label">
                Default Unchecked Radio
            </label>
        </div>
    </form>
</body>

</html>

Output:

3. Horizontal Form: The class used for horizontal form is .form-row

Example:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Horizontal Form</title>

    <!-- CSS only -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="container-sm mt-5">
    <form>
        <div class="form-row p-4">
            <div class="col mt-2">
                <input type="text" 
                    class="form-control" 
                    placeholder=" User Name">
            </div>

            <div class="col mt-2">
                <input type="password" 
                    class="form-control" 
                    placeholder=" Password">
            </div>

            <div class="col-2 mt-2  ">
                <button class="btn btn-primary 
                    btn-block">Login</button>
            </div>
        </div>
    </form>
</body>

</html>

Output:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

M
malodeganesh5
Improve
Article Tags :

Explore

Lightbox