Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add input groups with Bootstrap 5.

Sizing

We can change the size of the file input with the form-file-lg or form-file-sm classes.

For example, we can write:

<div class="form-file form-file-lg mb-3">  
  <input type="file" class="form-file-input" id="large-input">  
  <label class="form-file-label" for="large-input">  
    <span class="form-file-text">Choose a file...</span>  
    <span class="form-file-button">Browse</span>  
  </label>  
</div>

<div class="form-file form-file-sm">  
  <input type="file" class="form-file-input" id="small-input">  
  <label class="form-file-label" for="small-input">  
    <span class="form-file-text">Choose a file...</span>  
    <span class="form-file-button">Browse</span>  
  </label>  
</div>

to add a big and small file input.

Range Slider

Bootstrap 5 comes with styles for a range input.

For example, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input">

Then we have a range input where we can drag the handle around.

We set the type to range and use the form-range class to style it.

Min and Max Values

We can set the min and max attribute to limit the values that we can set with it.

For example, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input" min="0" max="15">

Steps

Bootstrap 5’s range slider snaps to the nearest integer by default.

To make it snap to a different kind of value, we can use the step attribute,.

For instance, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input" min="0" max="15" step="0.5">

to snap to the nearest half instead of the nearest integer.

Input Group

We can extend form control by adding text, buttons, or buttons groups on the left and right side of text input, select, or file input.

To add a basic input group, we can write:

<div class="input-group mb-3">  
  <span class="input-group-text">@</span>  
  <input type="text" class="form-control" placeholder="Username">  
</div>

to add an input group with the span with the input-group-text class.

We can add it to other elements or with different positions or content:

<div class="input-group mb-3">  
  <input type="text" class="form-control" placeholder="username">  
  <span class="input-group-text">[@example](http://twitter.com/example "Twitter profile for @example").com</span>  
</div>

<label for="basic-url" class="form-label">URL</label>  
<div class="input-group mb-3">  
  <span class="input-group-text" id="basic-addon3">https://example.com/</span>  
  <input type="text" class="form-control" id="basic-url">  
</div>

<div class="input-group mb-3">  
  <span class="input-group-text">$</span>  
  <input type="text" class="form-control" aria-label="Amount ">  
  <span class="input-group-text">.00</span>  
</div>

<div class="input-group">  
  <span class="input-group-text">textarea</span>  
  <textarea class="form-control"></textarea>  
</div>

We have inputs with the input-group class added to the div.

Then we have our span with the input-group-text class inside it to add the addons.

Wrapping

By default, the input group wrap with flex-wrap: wrap to accommodate custom form field validation.

We can disable this style with the .flex-nowrap class:

<div class="input-group flex-nowrap">  
  <span class="input-group-text" id="addon-wrapping">@</span>  
  <input type="text" class="form-control" placeholder="Username">  
</div>

Sizing

The sizing of the input group can be changed with the input-group-sm and input-group-lg classes.

For example, we can write:

<div class="input-group input-group-sm mb-3">  
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>  
  <input type="text" class="form-control">  
</div>

<div class="input-group mb-3">  
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>  
  <input type="text" class="form-control">  
</div>

<div class="input-group input-group-lg">  
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>  
  <input type="text" class="form-control">  
</div>

Sizing of individual group elements isn’t supported.

Checkboxes and Radios

We can add checkboxes and radios in our input group addons,.

For example, we can write:

<div class="input-group mb-3">  
  <div class="input-group-text">  
    <input class="form-check-input" type="checkbox" value="">  
  </div>  
  <input type="text" class="form-control">  
</div>

<div class="input-group">  
  <div class="input-group-text">  
    <input class="form-check-input" type="radio" value="">  
  </div>  
  <input type="text" class="form-control">  
</div>

to add a checkbox to the left of the first input.

And we add a radio button to the left of the 2nd input.

Conclusion

We can add input groups to add various content besides our input boxes.

Iterating Array

For Loop

The for loop is one of the most basic loops for looping through an array. It takes a starting index and then loops through to the ending index. Index must be an integer.

Example:

const array = [1,2,3];
for (let i = 0; i < array.length; i++){
  console.log(i);
}

The loop above should log all the numbers in the array.

Indexes do not have to be consecutive:

const array = [1,2,3];
for (let i = 0; i < array.length; i+=2){
  console.log(i);
}

The loop above will skip every second number.

While Loop

while loop will loop whenever a condition stays true.

For example, the loop below will run if the index number i is less than three:

const array = [1,2,3];

let i = 0;
while(i < array.length){
  console.log(i);
}

If the condition in the parentheses is never true, then the loop content will never run.

Do While Loop

do...while loop will always execute the first iteration.

const array = [1,2,3];

let i = 0;
do{
  console.log(i);
}
while(i < array.length)

In the example above, it will at least log 0, but it will also log 1 and 2 in this case since those two numbers are less than three.

With the above loops, you can call break to stop the loop or return before the loop is completely finished.

//do while loop
const array = [1,2,3];

let i = 0;

do{
  console.log(i);

  if (i == 1}{

    break;

  }

}
while(i < array.length)

//while loop
i = 0;

while(i < array.length){

  if (i == 1{

    break;

  }
  console.log(i);
}

//for loop
for (let j = 0; j < array.length; j++){

  if (j == 1){
    break;
  }
  console.log(j);
}

In the above examples, you will not see two logged.

An example of returning from within the loop:

const loop = ()=>{
  const array = [1,2,3];

  for (let j = 0; j < array.length; j++){

    if (j == 1){
      return j;
    }
    console.log(j);
  }
}
loop() //returns 1

You can also skip iterations with continue statement:

const array = [1,2,3];
for (let j = 0; j < array.length; j++){

  if (j == 1){
    continue;
  }
  console.log(j) // 1 will be skipped;
}

Array.forEach

forEach will iterate through every entry of the array. You cannot break out of it or return a value from it. It takes a callback function where you can execute code.

Example:

const array = [1,2,3];
array.forEach(a =>{

  console.log(a);
})

In the above example, all the numbers in the array will be logged.

---

Find Element in Array

Array.find

Array.find will return the element in the array with the given condition. For example, if you want to get certain numbers from the array, you do:

const array = [1,2,3];
const num = array.find(a => a == 2); // returns 2

find returns a single result.

Array.findIndex

Array.findIndex will return the index of the element in the array with the given condition. It takes a callback function that returns a given condition. For example, if you want to get the index of a certain numbers from the array, you do:

const array = [1,2,3];
const num = array.findIndex(a => a == 2); // returns 1

Array.filter

Array.filter will return an array of items that meet the given condition. It takes a callback function that returns a given condition. filter returns a new array.

For example, if you want to get the index of a certain numbers from the array, you do:

const array = [1,2,3];
const numArray = array.filter(a => a == 2); // returns [2]

---

Check if Element Exists in Array

Array.includes

Array.includes checks if an item exists in an array. It takes a number or string which the function can compare.

const array = [1,2,3];
const includesTwo = array.includes(2); // returns true

Array.some

Array.somechecks if some items meet the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];
const includesTwo = array.some(a => a == 2); // returns true
const includesFive = array.some(a => a == 5); // returns false

Array.every

Array.every checks if every item meet the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];
const everyElementIsTwo = array.`every`(a => a == 2); // returns false
const everyElementIsNumber = array.`every`(a => typeof a == 'number'); // returns true since every item in the array is a number

---

Check If an Object Is an Array

Array.isArray

Array.isArray checks if an object given is an array. It is a convenient way to check if an element is an array.

const array = [1,2,3];

const notArray = {};
let objIsArray = Array.isArray(array); // true
objIsArray = Array.isArray(notArray); // false

---

Remove Duplicates in Array

Array.from(new Set(array))

Set is a object that cannot have duplicate entries. You can create a new Set from an array then convert it back to an array.

const array = [1,2,2,3];
const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3]

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style input groups with Bootstrap 5.

Multiple Inputs

Input groups can have more than one input added inside it.

For example, we can write:

<div class="input-group">  
  <span class="input-group-text">First and last name</span>  
  <input type="text" class="form-control">  
  <input type="text" class="form-control">  
</div>

to add first and last name inputs in one input group.

Multiple Addons

An input group can have multiple addons added to them.

For example, we can write:

<div class="input-group mb-3">  
  <span class="input-group-text">$</span>  
  <span class="input-group-text">0.00</span>  
  <input type="text" class="form-control">  
</div>
<div class="input-group">  
  <input type="text" class="form-control">  
  <span class="input-group-text">$</span>  
  <span class="input-group-text">0.00</span>  
</div>

We have 2 spans with the input-group-text class to add 2 input addons.

Button Addons

Buttons can be added as input group addons.

For example, we can write:

<div class="input-group mb-3">  
  <button class="btn btn-outline-secondary" type="button">Button</button>  
  <input type="text" class="form-control" placeholder="name">  
</div>

We added a button straight into the input-group to use it as an addon.

We can also add a button to the right side:

<div class="input-group mb-3">  
  <input type="text" class="form-control" placeholder="name">  
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>  
</div>

Also, we can add more than one addon.

For instance, we can write:

<div class="input-group mb-3">  
  <button class="btn btn-outline-secondary" type="button">Button</button>  
  <button class="btn btn-outline-secondary" type="button">Button</button>  
  <input type="text" class="form-control" placeholder="name">  
</div>
<div class="input-group">  
  <input type="text" class="form-control" placeholder="name">  
  <button class="btn btn-outline-secondary" type="button">Button</button>  
  <button class="btn btn-outline-secondary" type="button">Button</button>  
</div>

Buttons with Dropdowns

Dropdowns can be added as input group addons.

The Bootstrap JavaScript files are required for the dropdowns.

For example, we can write:

<div class="input-group mb-3">  
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li><hr class="dropdown-divider"></li>  
    <li><a class="dropdown-item" href="#">grape</a></li>  
  </ul>  
  <input type="text" class="form-control">  
</div>

to add a dropdown to the left side.

We add the dropdown-toggle class to create the toggle.

And we have the data-toggle attribute to make it a toggle.

To add one to the right side, we can write:

<div class="input-group mb-3">  
  <input type="text" class="form-control">  
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><a class="dropdown-item" href="#">grape</a></li>  
  </ul>  
</div>

And we can add a dropdown to both sides:

<div class="input-group mb-3">  
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><a class="dropdown-item" href="#">grape</a></li>  
  </ul>  
  <input type="text" class="form-control">  
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">fruit</button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><a class="dropdown-item" href="#">grape</a></li>  
  </ul>  
</div>

Segmented Buttons

We can make the dropdown button segmented.

To do that, we can write:

<div class="input-group mb-3">  
  <button type="button" class="btn btn-outline-secondary">fruit</button>  
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><a class="dropdown-item" href="#">banana</a></li>  
  </ul>  
  <input type="text" class="form-control">  
</div>

We add the split toggle button by adding 2 buttons side by side.

We have the dropdown-toggle and dropdown-toggle-split classes to add the split dropdown button.

Also, we can put the split button and dropdown on the right side:

<div class="input-group mb-3">  
  <input type="text" class="form-control">  
  <button type="button" class="btn btn-outline-secondary">fruit</button>  
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">apple</a></li>  
    <li><a class="dropdown-item" href="#">orange</a></li>  
    <li><a class="dropdown-item" href="#">lemon</a></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><a class="dropdown-item" href="#">banana</a></li>  
  </ul>  
</div>

Conclusion

We can add multiple addons, inputs, and dropdowns to an input group.

To make the dropdown display, we need the JavaScript files.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style lists and images with Bootstrap 5.

Lists

Bootstrap 5 removes the default list-style and left margin of list items.

This only applies to immediate children list items.

The class has to be added to nested lists.

For example, we can wire:

`<ul class="list-unstyled">  
  <li>Lorem ipsum dolor sit amet</li>  
  <li>`Duis id nunc dignissim`</li>  
  <li>Nulla volutpat aliquam velit  
    <ul>  
      <li>Phasellus iaculis neque</li>  
      <li>` Suspendisse potenti. Aliquam erat volutpat.`</li>  
    </ul>  
  </li>  
  <li>`Pellentesque habitant morbi tristique senectus`</li>  
  <li>Aenean sit amet erat nunc</li>  
  <li>Eget porttitor lorem</li>  
</ul>`

to add a nested list.

We added the list-unstyled class to add an unstyled list.

Inline

We can remove a list’s bullets and apply some light margin with the combination of the .list-inline and .list-inline-item classes:

`<ul class="list-inline">  
  <li class="list-inline-item">`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`</li>  
  <li class="list-inline-item">`Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus.`</li>  
  <li class="list-inline-item">` Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis`</li>  
</ul>`

We add the classes to make the items display inline with margins.

Description List Alignment

To make a list with description, we can use the dl , dt , and dd tags with the width styles.

For example, we can write:

`<dl class="row">  
  <dt class="col-sm-3">Description lists</dt>  
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>  
  
  <dt class="col-sm-3">Euismod</dt>  
  <dd class="col-sm-9">  
    <p>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`</p>  
    <p>`ellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim.`</p>  
  </dd>  
  
  <dt class="col-sm-3">`Maecenas imperdiet sapien augue, ac malesuada metus ultrices et.`</dt>  
  <dd class="col-sm-9">`Aliquam erat volutpat. Quisque rutrum commodo felis imperdiet fermentum. Integer hendrerit dictum augue dapibus semper. In ac nisi consectetur`.</dd>  
  
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>  
  <dd class="col-sm-9">`Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`</dd>  
  
  <dt class="col-sm-3">Nesting</dt>  
  <dd class="col-sm-9">  
    <dl class="row">  
      <dt class="col-sm-4">Nested definition list</dt>  
      <dd class="col-sm-8">`Aenean dolor augue, vulputate non mattis eu, lacinia viverra ex.`</dd>  
    </dl>  
  </dd>  
</dl>`

We have the list with the dt and dd tags with the column classes to set the width of them.

Images

We can add responsive images with the img element and the .img-fluid class.

For example, we can write:

`<img src="`http://placekitten.com/200/200`" class="img-fluid" alt="cat">`

Image Thumbnails

To add thumbnails, we use the .img-thumbnail class:

`<img src="`http://placekitten.com/200/200`" class="img-thumbnail" alt="cat">`

Aligning Images

We can align images with the float-left or float-right classes:

<img src="http://placekitten.com/200/200" class="rounded float-left" alt="cat">  
<img src="http://placekitten.com/200/200" class="rounded float-right" alt="cat">

To make it aligned centered horizontally, we can write:

`<img src="`http://placekitten.com/200/200`" class="rounded mx-auto d-block" alt="cat">`

We used the mx-auto class to make the image centered.

Also, we can use the text-center class to do the same thing:

<div class="text-center">  
  <img src="http://placekitten.com/200/200" class="rounded" alt="cat">  
</div>

Picture

The picture element can be used to specify multiple sources of images.

So we can write:

`​<picture>  
  <img src="`http://placekitten.com/200/200`" class="img-fluid img-thumbnail" alt="cat 1">  
  <img src="`http://placekitten.com/201/201`" class="img-fluid img-thumbnail" alt="cat 2">  
</picture>`

We put the img elements in the picture tags.

And we’ve to add the img-* classes ion the img tag rather than the picture tag.

Conclusion

We can style lists and images with Bootstrap 5.

It comes with the classes for us to do so.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps. In this article, we’ll look at how to style form fields with Bootstrap 5.

Color Picker

We can add a color picker with the type attribute set to color .

For example, we can write:

<div class="mb-3">  
  <label for="color-input" class="form-label">Color picker</label>  
  <input type="color" class="form-control form-control-color" id="color-input" value="#563d7c" title="Choose your color">  
</div>

to add a color picker to our app.

We add the .form-control and .form-control-color to add the Bootstrap styles for the color picker.

Datalists

Bootstrap 5 has styles for data lists. A datalist lets us enter options and if there’s a match, we can select it.

To add one, we can write:

<div class="mb-3">  
  <label for="exampleDataList" class="form-label">Fruit</label>  
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">  
  <datalist id="datalistOptions">  
    <option value="apple">  
    <option value="orange">  
    <option value="lemon">  
    <option value="pear">  
    <option value="grape">  
  </datalist>  
</div>

to add a data list input with a datalist with a bunch of options that we can choose from. Bootstrap 5 provides consistent styling with the form-control class.

Select

We can style select elements with Bootstrap. To style it, we can use the .form-select class.

For example, we can write:

<select class="form-select">  
  <option selected>select a fruit</option>  
  <option value="1">apple</option>  
  <option value="2">orange</option>  
  <option value="3">grape</option>  
</select>

to create a drop-down with Bootstrap styles.

Dropdown Sizing

The size of a dropdown can be changed with Bootstrap classes.

We can use the form-select-lg to make it large and form-select-sm to make it small.

For example, we can write:

<select class="form-select form-select-lg">  
  <option selected>select a fruit</option>  
  <option value="1">apple</option>  
  <option value="2">orange</option>  
  <option value="3">grape</option>  
</select>

to make the dropdown large and:

<select class="form-select form-select-sm">  
  <option selected>select a fruit</option>  
  <option value="1">apple</option>  
  <option value="2">orange</option>  
  <option value="3">grape</option>  
</select>

to make it small.

The multiple attribute is also supported by Bootstrap:

<select class="form-select" multiple>  
  <option selected>select a fruit</option>  
  <option value="1">apple</option>  
  <option value="2">orange</option>  
  <option value="3">grape</option>  
</select>

The size attribute can be adjusted to only display the given number of items at once:

<select class="form-select" size='3' multiple>  
  <option selected>select a fruit</option>  
  <option value="1">apple</option>  
  <option value="2">orange</option>  
  <option value="3">grape</option>  
</select>

Checkboxes

Bootstrap 5 provides classes to let us add consistent styles for checkboxes. To do that, we can use the .form-check class that improves the layout and behavior of the element.

For example, we can write:

<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="apple">  
  <label class="form-check-label" for="apple">  
    apple  
  </label>  
</div>  
<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="orange" checked>  
  <label class="form-check-label" for="orange">  
    orange  
  </label>  
</div>

to add the checkboxes.

We have a div with the .form-check class. Inside it, we add the input with type checkbox to add the checkbox. They’re styles with the .form-check-input class.

To add a label, we can add the .form-check-label class to add the text beside the checkbox.

Indeterminate

We can use JavaScript to set the :indeterminate pseudoclass to make an indeterminate checkbox.

For example, we can write:

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

in our HTML code and then add:

document.getElementById("flexCheckIndeterminate").indeterminate = true;

in our JavaScript to make an indeterminate checkbox.

Disabled

We can make a checkbox disabled with the disabled attribute.

For example, we can write:

<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="apple" disabled>  
  <label class="form-check-label" for="apple">  
    apple  
  </label>  
</div><div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="orange" checked disabled>  
  <label class="form-check-label" for="orange">  
    orange  
  </label>  
</div>

We added 2 checkboxes with the disabled attribute to disable them.

checked makes it checked.

Conclusion

We can add datalists, color pickers, and checkboxes to our app. Bootstrap 5 provides all the styles. Thanks for reading my article, I hope you found it helpful!