Exploring the Possibilities of Bootstrap

TEAM TESTING

Who we are?
· Adrián Pastor 🤜🏽🤛🏽 Sara Oriola ·

📝 Project Description

Welcome to our research on Bootstrap and its integration with JS, HTML, and CSS! We explore the extensive functionalities of Bootstrap and how it complements these powerful web programming tools. Discover how to enhance the appearance and functionality of your projects with this winning combination. Join us on this exciting journey!

About the project

🎯 Objectives

1. Analyze Bootstrap features.
2. Experiment with Bootstrap functionalities.
3. Optimize the user experience.
4. Integrate JavaScript to enhance interactivity.
5. Customize and adapt styles.

📁 Views

1. Home
2. Log in
3. Cards

🔬 Methodology

Research and experimentation: We gathered relevant information about Bootstrap, JS, HTML, and CSS from reliable sources. Then, we applied these concepts in examples and projects to explore the capabilities of Bootstrap. We compared and evaluated the results obtained in different contexts.

Practical experimentation: We created a development environment and carried out a series of examples and projects to apply the learned concepts and explore the capabilities of Bootstrap.

Analysis and comparison: We compared and evaluated the results obtained by using Bootstrap in combination with JS, HTML, and CSS in different contexts.

Documentation: We maintained a detailed record of our research process, including the steps followed, the problems encountered, and the implemented solutions.

📊 Bootstrap Practice & Validations

We created a page using Bootstrap that meets the following requirements:

• Implementation of a NavBar to navigate between views.
• "Create User" view:
  • Form with fields for Name, Email, Password 1, and Password 2.
  • Validations to require the user to complete all fields, validate the email, and the passwords.
  • Error messages displayed for 3 seconds in case of not meeting the validations.
  • Success message and redirection to the "Users" view upon successfully completing the form.

🧠 Conclusions

In conclusion, this research project has allowed us to explore and deeply understand the potential of Bootstrap in combination with JS, HTML, and CSS. We have discovered that Bootstrap is a valuable tool for web development, providing a solid foundation, customizable components, and a flexible grid system.

💻 Preview

• General overview gif