adding social media icons in bootstrap studio

ADDING SOCIAL MEDIA ICONS IN BOOTSTRAP STUDIO HOW TO

A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. Now, we will be adding a hero image with some text in the center.

We will fix this issue after we complete the Services section to make you understand the issue properly.ĪDVERTISEMENT How to Add a Hero Header to the Portfolio It's fully transparent throughout the page which causes readability issues. However, the navbar has a problem while scrolling. You can find more details regarding Bootstrap 5 navbar features here. We will add a dark background on page scrolling later. It has six links: home, about, services, portfolio, contact, and footer.The navbar also has a navbar-brand class where we keep the name of the person as a brand.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. It will help visitors find the relevant info they're looking for. Now, let's work on adding a navigation menu in our project. How to Add a Navigation Menu to Your Portfolio Here, the script.js file is loaded after loading all the HTML code. In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit, and a link to the external style sheet and JavaScript. We'll write all CSS in the style.css file and the JavaScript in the script.js file. The folder structure consists of index.html, style.css, and script.js files and an images folder. Also, you can visit here to see the live demo of this project. You can get the project starter files on GitHub. We will now start working on creating the portfolio website.įirst, let's create the folder structure.

ADDING SOCIAL MEDIA ICONS IN BOOTSTRAP STUDIO HOW TO

Adding social media icons in bootstrap studio