# Bootstrap Mock Mastery



## 01. Build the page in your head.


A long question can feel frightening. Let us turn GadgetPro into four small pieces that you can understand and rebuild.

Start at the top. Header and navigation. Then About. Then Products. Finish with the footer. Say those four names aloud.

In this lesson, you will see where the code goes and why. We will build the page one layer at a time.

Use the interactive player to answer questions and test layouts. You can pause, replay a chapter, and open the complete working answer.


## 02. Read the question as a checklist.


First, underline what the question actually asks for. The header needs the business name and a navigation bar.

About needs three columns: an image, a shop description, and contact details. Products needs at least four cards, each with an image, title, and short description.

The footer needs address, phone, email, and social links. Also show Bootstrap typography, responsive images, and at least two spacing utilities.

Question one is worth fifty two marks in total. The paper gives no marks per section. Use this checklist to avoid missing a requirement.


## 03. Outside → inside.


Think of four boxes. Container, row, column, component. The container keeps your content aligned and adds space at the sides.

The row groups the columns. Put your column elements directly inside the row.

The column decides how much horizontal space one item takes. Your card, image, or text belongs inside that column.

Read the nesting aloud: container holds row, row holds columns, columns hold components. Close the boxes in reverse order.


## 04. Share twelve slices.


Bootstrap has twelve grid units across a row. For three equal About columns, divide twelve by three. Each column takes four units.

For four equal product columns, divide twelve by four. Each column takes three units. Four times three equals twelve.

The number in col md three means width of three grid units. It does not mean three cards. The breakpoint tells us when that width applies.

Four columns of width four total sixteen units. The fourth wraps to the next line. Wrapping is normal; it simply differs from a four across design.


## 05. Prepare the page before the parts.


Before adding components, prepare the HTML shell. Include the doctype, language, character set, title, head, and body.

Put the viewport meta tag and Bootstrap stylesheet in the head. The viewport lets the layout use the device width on a phone.

Inside the body, place Header, About, Products, and Footer in that order. Write the four zones before filling their contents.

Load the Bootstrap JavaScript bundle near the closing body tag. The grid needs CSS. The collapsing menu and modal also need Bootstrap JavaScript.


## 06. The navbar lives at the top.


Place a navbar inside the header at the top of the page. Navbar brand carries the name GadgetPro. Navigation links carry the section names.

A link to hash about must match an element with id about. A link to hash products must match id products.

For smaller screens, add a navbar toggler. Its data bs target must match the id on the collapse navbar collapse box.

Navbar expand large means the menu expands at nine hundred and ninety two pixels and above. A navbar is not fixed to the screen unless you add a positioning class.


## 07. About: image • story • contact.


In the About section, create one container and one row. Inside the row, place three sibling columns.

Put the shop image in the first column, the description in the second, and contact details in the third. Add image fluid to the image.

Each column uses col twelve and col md four. Below seven hundred and sixty eight pixels, each takes the whole row.

At medium widths and above, each takes four of twelve units. Three columns fit across. Read the code and point to the matching area on screen.


## 08. One card. Four familiar parts.


Build one product card correctly before copying it. The outer card wraps the product image and the card body.

Put the image before the body. Use card image top for the card image, and useful alternative text to describe it.

Inside card body, put a heading with card title and a paragraph with card text. The body supplies padding. A shadow needs an extra shadow utility.

Remember image, body, title, text. Our heading uses h three for document structure and the h five utility for size. Save this card inside a column.


## 09. Copy the COLUMN, then adapt.


Now repeat the whole column, including its card, until you have four products. Change the image, alternative text, title, and description for each one.

Use col twelve, col md six, col large three. On small screens, twelve units gives one card per line.

At medium widths, six units gives two cards per line. At large widths, three units gives four cards per line.

The guide uses col md three, which gives four across from medium upward. Our one, two, four recipe is another valid responsive solution with more tablet reading space.


## 10. Finish with space and contact.


The footer completes the page. Include all three contact details: address, phone, and email. Add meaningful social media links.

Padding is space inside a box. P y four adds padding on the top and bottom. It gives the footer breathing room.

Margin is space outside a box. M b three adds space below an element. The scale number is a Bootstrap spacing step, not a pixel count.

Show at least two spacing utilities. Use typography such as bold headings and centered text, plus responsive images. These small classes satisfy explicit parts of the question.


## 11. Find the broken layer.


When the page looks wrong, inspect one layer at a time. If your cards stack unexpectedly, check the row wrapper and the active breakpoint.

If card text touches the edge, check for card body. If the fourth item wraps, add up the column widths at the current screen size.

If the menu does not open, check that the toggler target matches the collapse id, and that the Bootstrap bundle loaded successfully.

If an image breaks, check its filename and path. If it spills outside its column, check image fluid. Test a phone, tablet, and desktop width before finishing.


## 12. Rebuild it without looking.


Close the answer for a moment. On paper, draw four zones: Header, About, Products, Footer.

Inside About, draw image, description, and contact. Inside Products, draw four cards. Name the container, row, and column layers.

Write one correct card from memory. Then repeat the whole column. Add working navigation, contact information, images, and spacing.

Finally, compare your result with the checklist. Resize it, test the mobile menu, and check the links. A product modal is optional for question one; it is not a stated requirement.


## 13. Five values. Five simple steps.


This second version uses one simple function called process Marks. Read each input separately: val one, val two, val three, val four, and val five. Get element by I D finds the box. Dot value reads what was typed. Repeat the same line with the next input I D.

Next, check for empty fields. The double vertical bars mean OR. If any value equals an empty string, show the alert and return. Return stops the function. Then report Validity asks the browser to check the numeric fields and our example limits of zero to one hundred.

Now do the maths. Parse float converts each input string to a number. Add all five converted values, then divide the total by five. For eighty five, ninety, seventy eight, ninety two, and eighty, the total is four hundred and twenty five, and the average is eighty five.

Fill total Display and average Display using inner Text. To Fixed two displays the average as eighty five point zero zero. Create the Bootstrap modal, then call show. Finish with the closing brace. Our Calculate button calls process Marks and uses type button to prevent an unwanted form submission.


## 14. Modal → dialog → content → parts.


A Bootstrap modal has nested layers. Modal, dialog, content. Inside content, header, body, and footer are siblings.

Use an id to find the modal. Fill the total and average display elements before calling the Bootstrap modal show method.

Add a success message and close buttons with data bs dismiss modal. The JavaScript bundle supplies the behavior. Modal dialog centered is the class for vertical centering.

Tab index minus one removes the modal from normal tab order while allowing programmatic focus. Practise the full chain: read, check, calculate, format, show.


## 15. Draw it. Place it. Explain it.


Here is your memory map. Header, About, Products, Footer. That is the page order.

Container, row, column, component. That is the placement order. Image, body, title and text. That is the card pattern.

For question two: read, check, calculate, format, show. The modal nesting is modal, dialog, content, then its three parts.

Now explain each pattern to a friend without reading it. Open the starter, build your own GadgetPro page, and use the checklist only after your first attempt.