NEW
Font size
WorksheetsBootstrap Grid System Worksheet
Total questions: 30
Worksheet time: 15mins
What happens if a .col-6 is placed outside a .row but inside .container?
It behaves exactly like normal
It converts into inline-block
Grid structure breaks and spacing becomes incorrect
It becomes full-width automatically
Bootstrap throws a console warning
<div class="row">
<div class="col-5"></div>
<div class="col-8"></div>
</div>
How many columns will this occupy?
Both stay in same row and shrink
Bootstrap throws an error
Second column moves to next line
Columns overlap each other
First column moves down
What does .col-12 col-md-6 mean?
Always takes 6 columns
12 columns on md, 6 on small
12 on mobile, 6 on md and above
Only works on desktop screens
6 columns only on tablets
Bootstrap follows which layout strategy?
Desktop-first
Mobile-first
Tablet-first
Fixed-width layout
Fluid-only layout
If no breakpoint is mentioned (col-6), it applies to:
Desktop only
All screen sizes
Mobile only
Tablets only
Large screens only
What happens if total columns = exactly 12?
Columns wrap
Content overflows
Fits perfectly in one row
Columns shrink
Last column hides
Why should we avoid margin-left/right on .col-*?
It removes internal padding
It breaks grid alignment
It hides content
It affects height
.container-fluid differs from .container because:
It has no padding
It is non-responsive
It spans full viewport width
It removes rows
It disables grid
What does m-5 equal in pixels?
16px
24px
48px
56px
64px
What does ml-auto do in a flex container?
Centers the element
Moves element left
Pushes element to right
Removes margin
Adds padding
Which class hides an element on medium and above screens?
d-none
d-md-none
d-sm-none
d-lg-none
invisible-md
Which statement is TRUE?
visibility:hidden removes space
d-none keeps space
d-none removes space
Both remove element from DOM
Both behave same
What happens if both m-3 and mt-5 are applied?
m-3 overrides everything
mt-5 overrides top margin
Bootstrap throws error
Browser ignores one
Both margins add up
Which utility changes visual order only?
position
float
order-*
z-index
display
15. Why does <img> not break into a new line by default?
It is inline
It is block
It is flex
It is absolute
It is floated
Why is <span> preferred inside <p>?
Semantic meaning
Inline behavior
SEO benefit
Block rendering
Accessibility
Which element always occupies full width?
span
a
div
img
strong
What happens if a block element is placed inside <span>?
Works normally
Browser crashes
Invalid HTML
Converts to inline
Span becomes block
Which property is NOT inherited?
color
font-family
margin
text-align
visibility
Which selector has highest specificity?
.box
div
#box
div.box
*
If two rules have same specificity, which wins?
First declared
Last declared
Inline style
ID selector
Browser default
Inline styles are discouraged because:
they make maintenance difficult
they improve performance
they enhance code readability
they promote code reuse
Which overrides everything?
ID selector
Inline style
!important
Class selector
Browser style
Which CSS property is inherited by default?
border
background-color
color
width
padding
Order of specificity (low → high):
ID → Class → Type
Type → Class → ID
Class → ID → Type
Inline → ID → Class
Universal → Inline → ID
Default direction of linear-gradient()?
Left → Right
Bottom → Top
Top → Bottom
Center → Edge
Diagonal
Which unit is relative to parent?
px
rem
%
vh
vw
What does transparent do?
Removes element
Hides content
Shows background behind element
Deletes color
Makes element invisible
In a Bootstrap .row, how do you vertically center columns of different heights?
.justify-content-center
.align-items-center
.text-center
.align-self-center
.center-block
Which keeps image height proportional when width changes?
Fixed height
Default behavior
position
overflow
z-index
