Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Implementing the Contact Form | Creating a Portfolio Website with Bootstrap
course content

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello BootstrapHistory and EvolutionAdvantages and DisadvantagesMaximizing LearningQuiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPMChallenge & Quiz

3. Basic Concepts

Grid SystemTypography Part 1Typography Part 2Buttons Part 1Buttons Part 2Margins and PaddingsFormsChallenge & Quiz

4. Advanced Concepts

NavigationImagesCardsModalsCarouselsChallenge & Quiz

5. Creating a Portfolio Website with Bootstrap

IntroductionSetting Up Development EnvironmentBuilding the Header NavigationDesigning the Hero SectionBuilding the Experience SectionCrafting the Skills SectionImplementing the Contact FormConclusion

Bootstrap: Building Stylish Websites

Implementing the Contact FormImplementing the Contact Form

1. Add the Contact Form Section

Create a section at the bottom of the page to accommodate the contact form.

Code Description
  • Section with ID: <section>tag with the ID contact defines a section of the webpage dedicated to providing contact information and a contact form.
  • Contact Section Styling:
    • Class py-5 adds padding to the top and bottom of the section to create spacing.
    • Class bg-secondary sets the background color of the section to a secondary color.
  • Container and Row: <div> with the class container and its child <div> with the class row are used to create a responsive grid layout for skills.
  • Form Column:
    • <div> with class col-md-8 mx-auto creates a column for the contact form.
    • <h2> tag with classes text-center, mb-4, and text-light displays the section title "Contact Me" in a centered manner with light text color and adds margin to the bottom of the heading.
  • Contact Form:
    • <form> tag is used to create a contact form.
    • <label> tags with class form-label provide labels for input fields.
    • <input> tags with class form-control create input fields for name and email.
    • <textarea> tag with class form-control creates a text area for the message.
    • <button> tag with classes btn and btn-warning creates a submit button with a warning color.

2. Create the Contact Form

Within the form, use Bootstrap's form components to create input fields for name, email, message, etc. Customize the form labels, placeholders, and button text as needed.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 7
course content

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello BootstrapHistory and EvolutionAdvantages and DisadvantagesMaximizing LearningQuiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPMChallenge & Quiz

3. Basic Concepts

Grid SystemTypography Part 1Typography Part 2Buttons Part 1Buttons Part 2Margins and PaddingsFormsChallenge & Quiz

4. Advanced Concepts

NavigationImagesCardsModalsCarouselsChallenge & Quiz

5. Creating a Portfolio Website with Bootstrap

IntroductionSetting Up Development EnvironmentBuilding the Header NavigationDesigning the Hero SectionBuilding the Experience SectionCrafting the Skills SectionImplementing the Contact FormConclusion

Bootstrap: Building Stylish Websites

Implementing the Contact FormImplementing the Contact Form

1. Add the Contact Form Section

Create a section at the bottom of the page to accommodate the contact form.

Code Description
  • Section with ID: <section>tag with the ID contact defines a section of the webpage dedicated to providing contact information and a contact form.
  • Contact Section Styling:
    • Class py-5 adds padding to the top and bottom of the section to create spacing.
    • Class bg-secondary sets the background color of the section to a secondary color.
  • Container and Row: <div> with the class container and its child <div> with the class row are used to create a responsive grid layout for skills.
  • Form Column:
    • <div> with class col-md-8 mx-auto creates a column for the contact form.
    • <h2> tag with classes text-center, mb-4, and text-light displays the section title "Contact Me" in a centered manner with light text color and adds margin to the bottom of the heading.
  • Contact Form:
    • <form> tag is used to create a contact form.
    • <label> tags with class form-label provide labels for input fields.
    • <input> tags with class form-control create input fields for name and email.
    • <textarea> tag with class form-control creates a text area for the message.
    • <button> tag with classes btn and btn-warning creates a submit button with a warning color.

2. Create the Contact Form

Within the form, use Bootstrap's form components to create input fields for name, email, message, etc. Customize the form labels, placeholders, and button text as needed.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 7
some-alt