My Blog

Category: 5. Helpers

https://cdn3d.iconscout.com/3d/premium/thumb/help-3d-icon-png-download-12031418.png

  • Color and background

    This chapter discusses about setting the background color with appropriate contrasting foreground or text color.

    These color and background helper classes combine the .text-* utilities and .bg-* utilities in one common class, namely .text-bg-*.

    In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background.php

    Example

    You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities</h4><br><div class="text-bg-primary p-3">Primary background with contrasting text color</div><div class="text-bg-secondary p-3">Secondary background with contrasting text color</div><div class="text-bg-success p-3">Success background with contrasting text color</div><div class="text-bg-danger p-3">Danger background with contrasting text color</div><div class="text-bg-warning p-3">Warning background with contrasting text color</div><div class="text-bg-info p-3">Info background with contrasting text color</div><div class="text-bg-light p-3">Light background with contrasting text color</div><div class="text-bg-dark p-3">Dark background with contrasting text color</div></body></html>

    Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

    Use alternative means to add clarity to the content using the .visually-hidden class.

    With components

    The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on badges.

    In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_badges.php

    Example

    You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities - badges</h4><br><span class="badge text-bg-success">Success</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-warning">Warning</span></body></html>

    The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on cards.

    In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_cards.php

    Example

    You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities - cards</h4><br><div class="card text-bg-info mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p></div></div><div class="card text-bg-warning mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p>s

          &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Clearfix

    This chapter discusses the clearfix feature of helper classes. The clearfix feature in Bootstrap is used to clear floated elements within a container. When elements within a container are floated, the container’s height can sometimes be collapsed, causing issues with the layout.

    Here’s an example of how to use the .clearfix class in Bootstrap:https://www.tutorialspoint.com/bootstrap/examples/clearfix_create.php

    Example

    The example below shows the usage of clearfix. Without the clearfix, the wrapping div would not span around the buttons which would cause a broken layout.

    You can edit and try running this code using the Edit & Run option.

    <!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Clearfix</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Clearfix example</h4><br><div class="bg-success clearfix"><button type="button" class="btn btn-secondary float-start">Button floated left</button><button type="button" class="btn btn-secondary float-end">Button floated right</button></div></body></html>