M3- Using Bootstrap styles Flashcards
What helps a website adapt to different screen sizes?
Bootstrap helps your website automatically adjust to different screen sizes, so it looks good on all devices.
How does Bootstrap adapt website to different screens?
Bootstrap achieves this adaptability using CSS classes. These classes are like labels you can stick on your website elements (like text, buttons, images) to tell them how to behave.
These classes are built by Bootstrap developers who have already thought about thousands of different situations a website might encounter.
What are infixes in Bootstrap, and why are they important?
Infixes in Bootstrap are special instructions that you insert into CSS class names to tell Bootstrap how to adjust your website’s layout based on the screen size. They help your site automatically adapt to different devices by setting responsive breakpoints.
Infixes help you make your website responsive by adjusting to screen
What are responsive breakpoints, and how are they used in Bootstrap?
Responsive breakpoints are thresholds for different screen sizes where your website’s layout needs to change. Bootstrap uses these breakpoints to ensure your website looks good on any device.
What are the different breakpoints (thresholds for different screen sizes)?
- Extra small (less than 576 pixels): This is the default setting, no special label needed.
- Small (576 pixels or more): Use the infix sm.
- Medium (768 pixels or more): Use the infix md.
- Large (992 pixels or more): Use the infix lg.
- Extra Large (1200 pixels or more): Use the infix xl.
- Extra Extra Large (1400 pixels or more): Use the infix xxl.
How do I use these infixes in Bootstrap classes?
To use infixes, you add them to your CSS class names to specify the behavior at different screen sizes. For example, if you want an element to take up six columns on a large screen, you’d write:
< div class=”col-lg-6”>< /div>
Here, col is the base class for columns, lg is the infix for large screens, and 6 indicates the element should occupy six columns out of twelve.
What are modifiers in Bootstrap, and how do they work?
Modifiers are like adjectives that change the appearance of Bootstrap components. They allow you to quickly customize the look of elements such as alerts, buttons, or text, based on the context (e.g., success, warning, error).
Modifiers change the appearance of elements based on context
Can you give an example of how modifiers are used with Bootstrap components?
Let’s take Bootstrap’s alert component, which displays messages to users. The alert-primary class shows a blue alert:
< div class=”alert alert-primary”>This is a primary alert< /div>
If you want to change the alert color to red for an error message, you’d use the danger modifier:
< div class=”alert alert-danger”>This is a danger alert< /div>
What are some common modifiers available in Bootstrap?
- primary: Blue (used for general information).
- secondary: Grey.
- success: Green (used for success messages).
- info: Light blue (used for informational messages).
- warning: Yellow (used for warnings).
- danger: Red (used for errors or critical messages).
- light: Light grey.
- dark: Dark grey or black.
How do infixes and modifiers save time when designing a website?
Infixes ensure your layout automatically adjusts to different screen sizes without needing to redesign for each device. Modifiers let you quickly change the appearance of elements based on context (like changing a message from a general alert to an error). Together, they allow you to build responsive, visually consistent websites much faster.
