How to use Inline CSS In Bootstrap

Make a basic structure of the web page using HTML. Add CDN link of Bootstrap from the official Bootstrap website.
Here, we have used four check boxes and used various bootstrap classes to give them styling.
Use Inline CSS to change the Bootstrap checkbox size.
Then, the value of the width is 50px and the height is 50px for changing the size of the checkbox.

Example: The example used the approach Inline CSS for changing the Bootstrap checkbox size.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Checks and radios Checks</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">

</head>

<body>
    <div class="container">

        <h2 class="text-center">
            Bootstrap checkbox
        </h2>

        <h3>Select Technology</h3>
        <div class="form-check">
            <input class="form-check-input"
                   type="checkbox" 
                   value="" 
                   id="html" 
                   style="width:50px;height:50px">
            <label class="form-check-label" 
                   for="html">
                Large HTML
            </label>
        </div>
        <br /><br />

        <div class="form-check">
            <input class="form-check-input" 
                   type="checkbox" 
                   value="" 
                   id="css">
            <label class="form-check-label" 
                   for="css">
                Small CSS
            </label>
        </div>
        <br /><br />
        <div class="form-check">
            <input class="form-check-input" 
                   type="checkbox" 
                   value="" 
                   id="js" 
                   style="width:70px;height:70px">
            <label class="form-check-label" 
                   for="js">
                Large JavaScript
            </label>
        </div>
        <br /><br />
        <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   value="" 
                   id="bootstrap" checked>
            <label class="form-check-label" 
                   for="bootstrap">
                Small Bootstrap
            </label>
        </div>
    </div>
</body>

</html>

Output:

Bootstrap Checkbox size Example Output

How to change Bootstrap Checkbox size ?

Changing Bootstrap Checkbox size involves applying classes like form-check-input-lg for larger checkboxes or form-check-input-sm for smaller ones. Adjustments can be made through additional CSS styling as required.

Syntax:

<div class="form-check">
      <input class="form-check-input" 
          type="checkbox" value="..." id="...">
      <label class="form-check-label" for="...">
        Content
      </label>
</div>

Table of Content

Using input[type=”checkbox”]
Using transform and scale
Using Inline CSS

How to use Inline CSS In Bootstrap

How to change Bootstrap Checkbox size ?

Table of Content

Similar Reads