React Bootstrap Intro Section With Dropdown Navigation

Technologies Used

• React
• HTML5
• CSS3
• Bootstrap

Challenges and Learnings:

One significant challenge encountered during this project was customizing Bootstrap's standard CSS to achieve the desired modifications. Specifically, adjusting the side navbar's format and icons proved to be difficult. Overcoming this challenge required careful inspection and identification of the necessary CSS rules to overwrite without affecting other elements on the page.

Another challenge arose from the decision to utilize Bootstrap's buttons instead of creating custom ones. This choice added complexity and limited flexibility in achieving the desired button styles. In hindsight, creating custom buttons would have been a simpler approach.

Additionally, managing Bootstrap's default padding and margin settings presented difficulties in achieving a symmetrical and balanced design. Adjustments had to be made to ensure the page appeared visually harmonious.

Despite these challenges, the project overall was straightforward, leveraging React, HTML, CSS, and Bootstrap. It provided valuable experience in customizing and extending Bootstrap's components while developing a responsive intro section with dropdown navigation.