Demo

The website you are currently viewing is actually the demo. However, this page has been created to make sure you won't miss any feature of Bootiful.

1. Classic pages

1.1 Landing page Demo here The landing page has currently 3 kind of sections : hero, featurettes, screenshots, testimonials, and CTA. The screenshots section is the only one where you will find images on the website. They are mandatory if you want to practically use the famous "show, don't tell" .

1.2 Styleguide Demo here The styleguide could be seen as optionnal, since Boostrap does all the heavy lifting for you. However, Bootstrap itself is customised in this theme, even if we tried to stick as much as possible to the standard default. Therefore, it's always a good idea to see how standard components evolves when you decide to change one of the default SCSS values. Moreover, it greatly simplifies the work with the design team (if any).

1.3 About, Credits, Privacy pages Demo here In order to reduce the design work, the simple way to design a text-based page is to apply the same css as any blog article. You get a nice typography, vertical rythm, etc.

1.4 Footer Classic footer Small footer There are 2 footers on Bootiful, one for long-text content, the other for small screens like authentication. The classic footer is inspired directly from Bootstrap official examples. Remember that the footer is a lot more clicked than you could imagine, so that's a good place to put every useful link, and even newsletter subscribe form.

2. Authentication pages

1.2 Login page Demo here The login page has a complete different layout (no navigation header, and a smaller footer). It's also a good way to see how the Bootstrap form validation was designed. Left all fields empty (or empty them, because browsers tend to fill input with default values nowadays), then click the submit button. You will see how invalid fields are supposed to be shown with Bootstrap there is also a Toast that should be displayed

1.3 Signup page Demo here Added values of your product are listed on the left, in order to help the user do something difficult : subscribe to another service. Of course the actual e-mail is never read for this demo, because it's only a front-end project. Integrate it to your own web framework to collect email from your users.

3. Profile page

Profile page is where the user after subscription.

3.1 Default profile page Demo here The default profile page show an alternative navigation - classic page like privacy, terms, etc are less relevant since the user has already accepted terms and conditions after signup. Notice how each field is displayed inside a card. After submit, some Toast should probably be displayed, but this is not yet implemented.

3.2 Notification tab Demo here The notification tab is a good way to show other inputs. Select/options, and checkboxes appears. You can add as much tabs and form control as you wish, of course.

3.3 Danger tab Demo here The "Danger Zone" is a way to show how dangerous actions could be displayed. A simple, small red button is show here. Probably a "are you sure" modal should be shown after clicking the button, but this is not yet implemented.

4. Admin dashboard

4.1 Default page Demo here This is probably the good place to show the KPI. Notice how each KPI is wrapped inside a card component.

4.2 List a resource Demo here This is where you show a datatable that list any of your resource - actually a table of your database. There is no such thing as "datatable" in Bootstrap. You have to build it yourself, so this one is styled to show many complex value fields (like badge or date). You can also add filter and search functionalities, that are often expected for that kind of screen.

4.3 Show a resource Demo here If you click on the "Show" button of the list, you will see this "Show" screen that actually display a resource. Typically, this is a record in the database. The admin dashboard helps to display it nicely to the end-user (which may not work in the computer science field).

4.4 Create a resource Demo here This screen will help the end-user to create a new resource in the database.

4.5 Update a resource Demo here This screen will help the end-user to update a new resource in the database. Typically, the fields are already filled. If you click on the "Cancel" button, you will see how a Toast could be displayed to explain that the action was cancelled. If you click on "Save", a different message will appear after redirection.

4.5 Settings Demo here It's always nice to have a section within the admin dashboard, dedicated to settings. It could be about anything related to developer task : empty a queue, reset sessions, and so on. But also on the businness side : enable or not some tracking, show banner (or not), and so on.

---

Last updated: Nov 14, 2021. Updated section on intended uses.