Bootstrap Flashcards
(25 cards)
What is Bootstrap, and why is it used?
1-Bootstrap is a popular front-end framework that helps developers build responsive and mobile-first websites quickly.
2-It provides a collection of pre-designed CSS styles, JavaScript components, and grid systems to simplify web development.
3-It is widely used for its ease of use, consistency, and responsiveness.
How do you create a responsive grid layout in Bootstrap?
Bootstrap uses a 12-column grid system to create responsive layouts. You can define columns using .col-, .col-sm-, .col-md-, .col-lg-, and .col-xl-, depending on the screen size.
What are Bootstrap containers, and how are they used?
1-A container in Bootstrap is used to wrap content and provide responsive padding.
2-.container → Fixed-width container that adapts to screen size.
.container-fluid → Full-width container spanning the entire viewport.
.container-{breakpoint} → Fixed-width container that changes at a specific breakpoint (e.g., .container-md).
How to link Boostrap to your projct?
1-by either using <link></link>
2- npm i bootstrap@5.3.3
What are Bootstrap spacing utilities, and how do they work?
Bootstrap provides spacing utilities for margin (m-) and padding (p-). These utilities help control spacing in a consistent way using a predefined scale (0 to 5).
What is the syntax of spacing utilities?
{property}{sides}-{size}
Talk about space sizing in Padding and Margin
{size}: 0 (none), 1 (small), 2 (medium), 3 (large), 4, 5 (largest)
How does Bootstrap handle colors?
Bootstrap provides a set of color utility classes for text, backgrounds, and borders. These classes help you quickly apply colors without writing custom CSS.
Text Colors: text-{color}
Background Colors: bg-{color}
Border Colors: border-{color}
What are the Default Color Patterns:
primary (Blue)
secondary (Gray)
success (Green)
danger (Red)
warning (Yellow)
info (Cyan)
light (Light Gray)
dark (Blackish Gray)
white (Pure White)
What do you do when you don’t have the color you want?
Either use external CSS or use inline CSS
How do you change text size in Bootstrap?
Bootstrap provides text size utilities using fs-{size} where {size} is a number from 1 to 6 (1 is largest , 6 is smalles)
How do you make text bold, italic, or muted in Bootstrap?
fw-bold → Bold text
fw-semibold → Semi-bold text
fw-light → Light-weight text
fst-italic → Italic text
text-muted → Light gray text
How do you enable Flexbox in Bootstrap?
d-flex
How do you change the flex direction in Bootstrap?
Use the flex-{direction} class to control direction:
How do you justify content in Bootstrap Flexbox?
justify-content-{value} to align items horizontally:
How do you align items using Bootstrap Flexbox?
Use align-items-{value} to control vertical alignment:
Can you use -sm, -md, -lg, and -xl with Bootstrap Flexbox?
d-{breakpoint}-flex
flex-{breakpoint}-row / flex-{breakpoint}-column
justify-content-{breakpoint}-{value}
align-items-{breakpoint}-{value}
How do you control height and width in Bootstrap?
Bootstrap provides height (h-) and width (w-) utility classes to quickly set element dimensions using percentages.
Width (w-{value})
Height (h-{value})
25-100 and auto
These are for the container
How do you make an element take full screen width and height in Bootstrap?
vh-100 → 100% of the viewport height
vw-100 → 100% of the viewport width
How do you add borders to an element in Bootstrap?
border → Adds a 1px solid border
border-0 → Removes borders
border-top → Adds a border to the top
border-bottom → Adds a border to the bottom
border-start → Adds a border to the left (LTR)
border-end → Adds a border to the right (LTR)
How do you change the border width in Bootstrap?
Use border-{size} to adjust border thickness.
border-1 → Thin border
border-2 → Medium border
border-3 → Thick border
border-4 → Extra thick border
border-5 → Very thick border
How do you make rounded borders in Bootstrap?
Use rounded-{size} to apply border radius.
rounded-0 → No rounding
rounded-1 → Small rounding
rounded-2 → Medium rounding
rounded-3 → Large rounding
rounded-circle → Fully circular border
rounded-pill → Pill-shaped border
How do you control border opacity in Bootstrap?
Available Border Opacity Classes:
border-opacity-10 → 10% opacity
border-opacity-25 → 25% opacity
border-opacity-50 → 50% opacity
border-opacity-75 → 75% opacity
border-opacity-100 → 100% opacity (default)
How do you make images responsive in Bootstrap?
Bootstrap provides the img-fluid class to make images responsive.
It sets max-width: 100% and height: auto, so the image scales within its container.
