

**Bootstrap** is a CSS framework that provides pre-built components and utilities for building responsive web applications. It simplifies web development by offering a consistent design and layout. With its responsive grid system, CSS components, and JavaScript plugins, Bootstrap enables developers to quickly create visually appealing and mobile-friendly websites.

#

## `input type="range"` in Bootstrap

In Bootstrap, the **input** element with `type="range"` is a form input that allows users to select a value within a specified range. It can be styled using the form-range class to provide a visually appealing slider interface. Bootstrap's range input simplifies the process of creating interactive and user-friendly range selection controls in web applications.

## How to use `input type="range"`

To use `input type = "range"` in Bootstrap, let's follow the steps given below.

### Step 1: Set Up the HTML File

Create a new HTML file and open it in your preferred text editor or IDE. You can name the file index.html or choose any other name that suits your project.

### Step 2: Include Bootstrap CSS and JavaScript

To use Bootstrap, we need to include its CSS and JavaScript files. We will use a content delivery network (CDN) to include the files remotely. 
This can be done by adding the following code in the `<head>` section of your code in index.html file.

``` 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

```
This line of code includes the Bootstrap CSS file from the CDN.

To add a Bootstrap JavaScript file, add the following code just before the closing `</body>` tag in index.html file.

```
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
```
### Step 3: Create a range input

Now that we have set up Bootstrap, let's create a range input element. Inside the `<body>` section of your HTML file, add the following code:







<div class="container">
  <form>
    <div class="form-group">
      <label for="rangeInput">Range Input</label>
      <input type="range" class="form-range" id="rangeInput">
    </div>
  </form>
</div>

#### Code explanation

- We wrap the form elements inside a `<div>` element with the class `container`. This class ensures the content is centered and responsive.
- Within the form, we have a `<div>` element with the class `form-group`. This class adds spacing and styling to the form elements within it.
- Inside the `form-group` div, we have a `<label>` element with the `for` attribute set to `"rangeInput"`. This associates the label with the input element.
- Finally, the range input is denoted by the `<input>` element with `type="range"`. We apply the `form-range` class to style the range input.

## Example




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Range Input Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form>
      <div class="form-group">
        <label for="rangeInput">Range Input</label>
        <input type="range" class="form-range" id="rangeInput">
      </div>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


codemirror

## Conclusion

The above executable code is an example of a web application of `input type="range"`, which contains the range input widget along with the code to include Bootstrap CSS and Javascript in the application. We can dynamically move the bar to change the input value after executing the above code. 

How to use input type="range" in Bootstrap

Bootstrap's `input type="range"` uses the `form-range` class for styling. Include Bootstrap CSS/JS via CDN and add an HTML range input element.