Category: HTML

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 button groups with Bootstrap 5.

Button Group

Button groups let us group a series of buttons together on a single line.

To add one, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

We have the .btn-group class to create the button group.

Also, we can use the .active class to highlight a button.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary active">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

This also works with links:

<div class="btn-group">  
  <a href="#" class="btn btn-secondary active">left</a>  
  <a href="#" class="btn btn-secondary">center</a>  
  <a href="#" class="btn btn-secondary">right</a>  
</div>

The active class works with both buttons and links.

Outlined Styles

The button group can have outlined styles instead of background color.

For example, we can write:

<div class="btn-group">  
  <a href="#" class="btn btn-outline-secondary">left</a>  
  <a href="#" class="btn btn-outline-secondary">center</a>  
  <a href="#" class="btn btn-outline-secondary">right</a>  
</div>

We have the btn-outline-secondary class on each button to make the buttons outlined.

Button Toolbar

To group button groups together, we can add button toolbars.

For example, we can write:

<div class="btn-toolbar">  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">1</button>  
    <button type="button" class="btn btn-primary">2</button>  
    <button type="button" class="btn btn-primary">3</button>  
  </div>  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">4</button>  
    <button type="button" class="btn btn-primary">5</button>  
    <button type="button" class="btn btn-primary">6</button>  
  </div>  
  <div class="btn-group">  
    <button type="button" class="btn btn-primary">7</button>  
    <button type="button" class="btn btn-primary">8</button>  
  </div>  
</div>

We have the div with the btn-toolbar class to add the button group.

Then we have the button groups inside.

We add mr-2 to add some margins to the right.

Sizing

Button group sizes can be changed.

The btn-group-* classes can let us change the size.

For example, we can write:

<div class="btn-group btn-group-lg">  
  <button type="button" class="btn btn-primary">1</button>  
  <button type="button" class="btn btn-primary">2</button>  
  <button type="button" class="btn btn-primary">3</button>  
</div>

to add a button group with large buttons.

This is done with the btn-group-lg class.

To make a button group with small buttons, we can write:

<div class="btn-group btn-group-sm">  
  <button type="button" class="btn btn-primary">1</button>  
  <button type="button" class="btn btn-primary">2</button>  
  <button type="button" class="btn btn-primary">3</button>  
</div>

This is done with the btn-group-sm class.

Nesting

Button groups can be nested.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We put a button group inside another button group so that we can add a dropdown to our code.

The dropdown is in one button group.

We have a button for the dropdown toggle and a ul for the menu.

Vertical Variation

We can make button groups vertical with the btn-group-vertical class.

Split button dropdowns aren’t supported with vertical button groups.

To add one, we can write:

<div class="btn-group-vertical">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We just add the btn-group-vertical class to make it vertical.

Conclusion

Button groups let us add multiple buttons into one container.

We can nest them and add dropdowns to them.

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 badges and breadcrumbs with Bootstrap 5.

Badges

Badges scale to match the size of the immediate parent element by using font sizing and em units.

They no longer have focus or hover style for links in Bootstrap 5.

For example, we can write:

<h1>heading <span class="badge bg-secondary">New</span></h1>  
<h2>heading <span class="badge bg-secondary">New</span></h2>  
<h3>heading <span class="badge bg-secondary">New</span></h3>  
<h4>heading <span class="badge bg-secondary">New</span></h4>  
<h5>heading <span class="badge bg-secondary">New</span></h5>  
<h6>heading <span class="badge bg-secondary">New</span></h6>

to add the badge with the badge class.

They can also be added to the buttons.

For example, we can write:

<button type="button" class="btn btn-primary">  
  Notifications <span class="badge bg-secondary">100</span>  
</button>

We can also add screenreader-only text to disambiguate badge text:

<button type="button" class="btn btn-primary">  
  Notifications <span class="badge bg-secondary">100</span>  
  <span class="sr-only">unread messages</span>  
</button>

We have a span with the sr-only class which is only read by screen readers and isn’t visible on the screen.

Background Colors

The background colors can be changed with various classes.

For example, we can write:

<span class="badge bg-primary">Primary</span>  
<span class="badge bg-secondary">Secondary</span>  
<span class="badge bg-success">Success</span>  
<span class="badge bg-danger">Danger</span>  
<span class="badge bg-warning text-dark">Warning</span>  
<span class="badge bg-info">Info</span>  
<span class="badge bg-light text-dark">Light</span>  
<span class="badge bg-dark">Dark</span>

to add badges with various styles.

The bg-* classes are the styling classes.

Pill Badges

We can also make badges display in pill style.

For example, we can write:

<span class="badge rounded-pill bg-primary">Primary</span>  
<span class="badge rounded-pill bg-secondary">Secondary</span>  
<span class="badge rounded-pill bg-success">Success</span>  
<span class="badge rounded-pill bg-danger">Danger</span>  
<span class="badge rounded-pill bg-warning text-dark">Warning</span>  
<span class="badge rounded-pill bg-info">Info</span>  
<span class="badge rounded-pill bg-light text-dark">Light</span>  
<span class="badge rounded-pill bg-dark">Dark</span>

We add the rounded-pill class to make them display as pills.

Breadcrumb

Breadcrumbs are used to indicate the current page’s location with a navigational hierarchy that automatically adds separators with CSS.

For example, we can write:

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item active">Home</li>  
  </ol>  
</nav>

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item"><a href="#">Home</a></li>  
    <li class="breadcrumb-item active">Profile</li>  
  </ol>  
</nav>

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item"><a href="#">Home</a></li>  
    <li class="breadcrumb-item"><a href="#">Profile</a></li>  
    <li class="breadcrumb-item active">Settings</li>  
  </ol>  
</nav>

We add breadcrumbs with ol and li elements with the breadcrumb class to add the breadcrumbs.

li has the breadcrumb-item class to add them as items.

Changing the Separator of the Breadcrumb

We can change the separator of the breadcrumb with the $breadcrumb-divider SASS variable.

For instance, we can write:

$breadcrumb-divider: quote(">");

to change it to a > .

And we can write:

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

to change it to an SVG.

We can remove it with:

$breadcrumb-divider: none;

Conclusion

We can add badges and breadcrumbs easily with Bootstrap 5.

The only change from the previous version is that there’s no hover effects for badges.

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 alerts with Bootstrap 5.

Alerts

Alerts give users contextual feedback messages for user actions.

It comes in various styles.

For example, we can write:

<div class="alert alert-primary">  
  primary alert  
</div>  
<div class="alert alert-secondary">  
  secondary alert  
</div>  
<div class="alert alert-success">  
  success alert  
</div>  
<div class="alert alert-danger">  
  danger alert  
</div>  
<div class="alert alert-warning">  
  warning alert  
</div>  
<div class="alert alert-info">  
  info alert  
</div>  
<div class="alert alert-light">  
  light alert  
</div>  
<div class="alert alert-dark">  
  dark alert  
</div>

We add the classes for the alerts with the given classes.

Link Color

The .alert-link class lets us match colored links with any alerts.

For example, we can write:

<div class="alert alert-primary">  
  primary alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-secondary" role="alert">  
  secondary alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-success" role="alert">  
  success alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-danger" role="alert">  
  danger alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-warning" role="alert">  
  warning alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-info" role="alert">  
  info alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-light" role="alert">  
  light alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-dark" role="alert">  
  dark alert <a href="#" class="alert-link">link</a>  
</div>

We have the .alert-link class to add links that match the style of the alerts.

Additional Content

We can add additional content into our alerts.

A heading can be added with the alert-heading class.

For example, we can write:

<div class="alert alert-success" role="alert">  
  <h4 class="alert-heading">Heading</h4>  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam hendrerit nisl. Nunc efficitur ex id orci lacinia, eget bibendum risus aliquam. Phasellus et ornare nisi, vel lacinia purus. Vivamus mollis cursus magna, quis consectetur justo bibendum vitae. Donec mattis sem non nisi elementum, non sollicitudin massa pretium. Donec ante enim, efficitur vitae pellentesque ac, varius eget purus. Aliquam ac ex sed dui tristique rutrum.</p>  
  <hr>  
  <p class="mb-0">In dictum elit vitae risus mattis sollicitudin non eu massa. Integer pretium pharetra nisi sed maximus. Sed sodales, sapien tristique posuere rhoncus, arcu quam cursus libero, in feugiat diam ante sed eros. Curabitur convallis auctor metus, eget lacinia tortor venenatis et. Praesent ligula metus, consequat sodales mauris fermentum, rhoncus placerat tortor. Cras nec laoreet purus, nec dictum erat. Quisque ac accumsan odio, non finibus urna.  </p>  
</div>

to add the alert-heading class to the heading.

And then the paragraphs below it have the main content.

Dismissing Alerts

We can add the .alert-dismissible class to add a close button to the alert.

On the close button, we’ve to add the data-dismiss="alert" attribute to let us close it.

The .fade and .show classes let us add transition effects when dismissing them.

For example, we can write:

<div class="alert alert-warning alert-dismissible fade show">  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert">  
    <span>&times;</span>  
  </button>  
</div>

We add the button with the close class to add a close button.

And we have the data-dismiss attribute to let us close the alert with it.

Also, we have the alert-dismissible class to make the alert dismissible.

fade showgives us a fade transition effect when the alert is shown.

The Bootstrap JavaScript files are required for this to work.

JavaScript Behavior

We can trigger the dismissal of an alert with JavaScript by writing:

const alertList = document.querySelectorAll('.alert')  
alertList.forEach((alert) => {  
  new bootstrap.Alert(alert)  
})

The alert HTML can then be written as:

<div class="alert alert-warning alert-dismissible fade show" >  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert" >  
    <span>&times;</span>  
  </button>  
</div>

We can then get an existing alert and close it programmatically:

setTimeout(() => {  
  const alertNode = document.querySelector('.alert');    
  const alert = new bootstrap.Alert(alertNode)  
  alert.close()  
}, 3000)

We created the alert object with the bootstrap.Alert constructor so that we can call close on it to close it.

Events

Alerts also emit events, we can listen to the close.bs.alert and closed.bs.alert events and do what we want.

Conclusion

We can add alerts and style them with Bootstrap 5.

They can be added programmatically and closed programmatically.

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]