Awesome-BS5

Welcome to the Awesome-BS5 project!

Introduction

So hi there! This is the Bootstrap5 Awesome List by @Guleixibian2009. Here you can...

...have a look around the significant effects generated(actually hand-written) by Bootstrap, the most popular front-end open source toolkit in the world.
...try the utilities online with full demonstration. Just feel free!
...apply the great functions to your site. I'll show ya the full code!

P.S. If you're reading this offline and using Firefox, please turn to about:config and turn security.fileuri.strict_origin_policy false. Or otherwise you may not be able to see the source code because I used XHRs to load those source code(to prevent making this file too long).

About the Author

My "name card"

👋 Hi, I'm Guleixibian2009(故垒西边2009)
👀 I’m interested in Python and website building.
📫 How to reach me: guleixibian2009@outlook.com

Visit me on GitHub! Have a look at my website! Wanna see my Hand-Written-HTML-Site?

So what's `Bootstrap`?

Info From ~~Wikipedia~~Baidu

Build fast, responsive sites with Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

---From the offcial site, getbootstrap.com

Bootstrap is a simple, intuitive and powerful front-end development framework based on HTML, CSS and JavaScript developed by Mark Otto and Jacob Thornton, designers of Twitter Inc., which makes Web development faster. Bootstrap provides elegant HTML and CSS specifications written in the dynamic CSS language SCSS. Bootstrap has been a popular open source project on GitHub, including NASA's MSNBC's Breaking News.

The most recent version, Bootstrap5 was officially released on May 5, 2021.

An image of Bootstrap I cropped.

Now, the `Awesome List`!

So first, some basic ones...

Colored Table With Stripes

So actually this is very easy thanks to table-* classes(* stands for basic color names). The stripe effects are generated by class table-hover. So the full code is:

Actually you can use those color names just for the colors, don't care about what "warning" or "primary" means. Got it?

A reproduction of `Jumbotron`

Jumbotron is a kind of big screen(super big!) to convey important message or information you want you highlight. It was added to Bootstrap in version 3, but removed in 5. But, we can easily reproduce one using Bootstrap5. All we need is to change the bg-color, text-color and padding. Additionally you can add a border-radius or box-shadow. Like this:

They are quite like the alert boxes but they are for different purposes.

The badges after the headings

So do you want to add some tags for your article after their headings? You can use the badges powered by Bootstrap. I don't mean , but little tag like things.

Some normal ones first...

Those tag like badges are built with class badge and bg-secondary. Quite interesting because the badges will automatically fit its height with the headings, so it won't seem weird or too small.

Want some personality?

Try those styles!

Bored with those grey, square badges? Maybe you should try styling them with other classes. For example:

Well I used two badges in the last combination!

Dropdown Menus

Some basic ones

These two dropdown menus are built with buttons and two <ul>s. Bootstrap will translate those two components into whole menus.

Add something else to the dropdown menus

Links and text are boring to you? Try add something more fascinating to your drop down menus. For example, lines, pure link(blue with underline) and even headings!

Dropdown menus don't always need to be a drop"down". It can go up when there is enough space. Also you can add dividers(<hr>s) and headings in the menus.

You can also equip your dropdown menus with icons, search boxes and more.

Bootstrap Cards, Placeholders and loaders

Basic usage of them

Interested in the name card above? That is achieved using Card. It looks like a mini window. It can be used for conveying additional info.

The glowing stripes are placeholders. Read the code for basic usage!

Can I reproduce a spinner without Bootstrap?

Yes, you definitely can! I looked through Bootstrap's code and I found it very easy. It's just a bordered span with border-radius and sometimes color. At last, just remember to give it an animation!

Read the code for step-by-step tutorial!

Best for directories---`Breadcrumb`

Want to have a modern tree like directory? Then breadcrumb is your best choice. It looks like a file tree(like D://My/Coding/awesome-bs5) just because it is a kind of tree! For example see this:

It shows the user currently where he is.

Sometimes breadcrumbs are generated by JavaScript. But the theory is the same.

Switch, Checks and Radios

Checkboxes, radios and switches are very useful in web forms. In Bootstrap there are two styles. One is the basic style(provided by your browser) and the other is using buttons as the <label>s.

Basic Form Components

Just trying those is enough!

Easy enough, right?

Use buttons to override the `<input type="checkbox"></input>`s

While this may seem high-tech, it is very simple to build one.

In my opinion they are better ways to display checkboxes and radios. They are much bigger than the original ones, which is more convenient for the elders.

Alert boxes(that you can really close!)

Sometimes after users click on some buttons or checkboxes, there will be an message box. That is achieved by using alert boxes. Alert boxes are quite like Jumbotrons, but normally alert boxes are much smaller. They convey different kinds of info.

Alert boxes created manually

You can pre-difine some alert boxes with pure HTML. They will be shown on the correct places(use the position: static | absolute | fixed | relative | sticky;attributes) after the page is loaded.

Generate one on the fly!

Want to add a new alert to the page after some events? Then create alerts via JavaScript is the best solution. You just need to create an element with the correct contents. Try this button below:

The random alert box function is built with Math.random() * 3. Give it a correct parameter for the range.

You can apply those code to your own site. Amazing, right?

Now let's have a look at more complexed ones...

Popup Modals

Want to pop up something more complex and alerts are no longer enough for you? Then try modal boxes. They are above the whole screen and when modals are activated users can't scroll on the page. You can add buttons and forms in modals. All popup modals must be closed(dismissed) for user experience.

Different kinds of popup modals

Basically a popup modal has a header, a body and a footer just like a card.

5 different kind of modal boxes for U!

Such long code...

Fullscreen when too narrow

Want your modals to be responsive? Then classes modal-fullscreen-*-down are the best for you. They will become fullscreen when the screen's width is narrower than * (e.g. md, sm, xl).

There are five sizes available.

So when you apply those classes to your modal, mobile users will usually recieve fullscreen ones. because phones are always narrower than sm.

Collapsing your content!

Too much content to show on the page which made you annoyed? Or only showing something when neccessary? Just collape those additional content! Add a button(or button like thing) as a trigger. Then add some data-bs-* attributes. Then it's OK!

P.S. Notice: no padding on the collapsible content. But you can use it as a container.

A very simple example:

The last <p> will go half way up then be pushed back down when you first fire only one collapsible content then click button#3 to toggle them both.

Tooltips(with JavaScript)

Want to convey some additional info on a certain piece of text? Then try Tooltips. They appear when users hover on their "parent" elements.

Basic Tooltips

Kinda complex this time because we must init all tooltips by JavaScript manually. Bootstrap won't pre-init them for performance reasons.

Pro Tip: Add type="module" on <script>s if you're using inline script(in case your browser doesn't recognize bootstrap).

Disable tooltips and re-enable them

Only want to show your users tooltips at a specific time or after some events? Then disable those tooltips first and then re-enable them!

These are also achieved by writing JavaScript. Bootstrap provided us a few functions. Use tooltip.toggle(); to show/hide it. Use tooltip.toggleEnabled(); to enable/disable it.

Offcanvas Sidebar

A kind of hidden nav which will appear when a button is clicked. It will spread through the page. Best for shopping carts and navbars.

The placements of offcanvas

You can put your offcanvas on four directions. Click the buttons below to toggle them.

Code bit like card. They both have header and body. Easy, right?

Tip: Want to place it inside a certain box? Use position: static; for the offcanvas and give it a height.

About offcanvas's backdrop

The page is locked when an offcanvas appear by default. If you don't want it to do so, cancel its backdrop.

P.S. Do not change the settings while the offcanvas is open! Close it first.

We must re-init the offcanvas after we changed the settings.

Progress Bars

Want to indicate the loading progress visually? Then use those progress bars. Very easy to build one: just set its width via CSS or JavaScript.

The last one is automated with JavaScript. See below:

Scrollspy Navbars

Being tired of writing too much JavaScript to build a sidebar? Just use a scrollspy. You just need to add all the headings to a list-group or a <nav>. Scrollspy will handle the scrolling and highlighting.

P.S. You must set the scrolling element's height(or it won't become a scrolling element, right?).

Great news: No initing this time! Just add data-bs-spy and data-bs-target.(But you still need to init when you add a outside scrollspy to the page. That's what I'm doing.)

At last, some combined/even more high-tech ones!

Popup Toasts

Some unimportant messages and you don't want to use modals? Then try those cute little toasts! They will automatically disappear, but you can set autohide to false(then remenber to add a cloase button!). Still it's like card.

Pro Tip: You must init all toasts manually!

Toast Placements

You can show toasts almost everywhere you want! See below for placing classes(eg position-fixed, translate-middle, etc.)

Did you noticed that the toast body is a bit transparent?

Stacking and containers

Want to show more than one toast at the same place at the same time? Bootstrap provided us stacking styles.

Color Schemes

Tired of those white toasts and want some personality? Try add some colors, then match your text color with the background.

Navbar tabs with animation

Useful to represent contents within the same area. Use buttons as tab keys, and pair them with correct tab pages.

Accordions---Cards and Collapsing

Not interested in nav tabs? Then try building an accordion. They are like cards but stacked.

Live Example!

Open more items at a time

Quite easy, just omit data-bs-parent on each item.

So that's all, thanks for reading and wish you happy coding with Bootstrap!