Scribd
Upload
4 views21 pages

CSC336-WT Lec13 Slides

This document outlines various utility classes in Bootstrap for web development, focusing on layout, spacing, text, background, and visibility utilities. It emphasizes the importance of responsive design and provides examples of how to use these classes effectively. The lecture aims to simplify development and maintain clean markup while encouraging exploration of advanced Bootstrap utilities.

Uploaded by

hocicex411
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views21 pages

CSC336-WT Lec13 Slides

This document outlines various utility classes in Bootstrap for web development, focusing on layout, spacing, text, background, and visibility utilities. It emphasizes the importance of responsive design and provides examples of how to use these classes effectively. The lecture aims to simplify development and maintain clean markup while encouraging exploration of advanced Bootstrap utilities.

Uploaded by

hocicex411
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Lecture # 13

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1


Bootstrap Utility
Classes
• Predefined helper classes in
Bootstrap
• Quick styling for layout, spacing,
text, etc.
• Save time by avoiding custom CSS
• Mobile-first responsive design
principles
Layout Utilities
• Control visibility with
• .d-none, .d-block, .d-flex
• Responsive display utilities
• .d-sm-none, .d-md-block // Hidden only on sm devices
• Flexbox utilities like
• .flex-row, .flex-column
Flexbox Utilities
• Align and justify content with
• .justify-content-center, .align-items-center
• Use justify-content to align along the main axis.
• Use align-items to align along the cross axis.
• Flex direction:
• .flex-row, .flex-column
• Auto margins:
• .ml-auto, .mr-auto
• margin-left: auto Vs margin-right: auto
Spacing Utilities

• .m-0, .mt-2, .mb-4


Margin classes: • Margin: 0, margin-top: 2, margin-bottom: 4

Padding classes: • .p-0, .pt-3, .pb-5

Responsive • .m-md-3, .p-lg-4


spacing:
Text Utilities

Text alignment:

• .text-left, .text-center, .text-right

Text transformation:

• .text-uppercase, .text-lowercase

Responsive text alignment:

• .text-md-left, .text-lg-center
Background Utilities

• Set background colors:


• .bg-primary, .bg-success, .bg-warning
• Gradient backgrounds:
• .bg-gradient-primary, .bg-gradient-info
• Control background opacity and text contrast
Border addition:

• .border, .border-top, .border-left

Border radius:
Border
Utilities • .rounded, .rounded-circle, .rounded-
pill

Border color:

• .border-primary, .border-danger
Width and height:
• .w-25, .w-50, .h-75

Max-width and max-height:


Sizing Utilities • .mw-100, .mh-100

Responsive sizing:
• .w-sm-100, .h-lg-50
Visibility Utilities

Show and hide


elements: •.visible, .invisible
Responsive
visibility: •.visible-md, .invisible-lg
Use aria-hidden
for accessibility
Overflow Utilities
• Control overflow:
• .overflow-auto, .overflow-hidden, .overflow-scroll
• Responsive overflow control:
• .overflow-sm-hidden, .overflow-lg-visible
• Useful for scrollable content sections
Display Utilities
• Display control:
• .d-none, .d-inline, .d-block, .d-flex
• Responsive display:
• .d-md-block, .d-lg-inline-flex
• Handy for showing/hiding elements at specific breakpoints
Position Utilities

Control element • .position-static, .position-relative,


positioning: .position-absolute

Stick to viewport • .sticky-top


edges:

Offset elements: • .top-0, .right-50


Float Utilities
• Float elements:
• .float-left, .float-right, .float-none
• Responsive float:
• .float-sm-right, .float-md-left
• Control float behaviors for various screen sizes
Text Color Utilities
• Set text colors:
• .text-primary, .text-secondary, .text-danger
• Light and dark text:
• .text-light, .text-dark
• Adjust contrast with
• .text-muted
Alignment Utilities
• Vertical alignment:
• .align-top, .align-middle, .align-bottom
• Use with tables or inline elements
• Responsive alignment:
• .align-md-top, .align-lg-bottom
Shadow Utilities
• Add box shadows:
• .shadow-sm, .shadow, .shadow-lg
• Remove shadow:
• .shadow-none
• Visual enhancement for cards, buttons, images
Control spacing between elements:
• .my-2(y=top+bottom), .mt-3, .mb-5
Vertical Spacing

Padding control:
• .py-4, .pt-2, .pb-3
Utilities

Responsive vertical spacing:


• .my-sm-1, .py-md-3
Z-Index Utilities
• Adjust stacking order:
• .z-index-auto, .z-index-1, .z-index-3
• Useful for popups, tooltips, modals
• Combine with
• .position-relative, .position-absolute
Responsive Utilities
• Control responsiveness with utilities:
• .col-sm, .col-md, .d-lg-block
• Adjust layout, spacing, and alignment for different devices
• Simplifies development for mobile-first design
Lesson
Learning • Utility classes simplify development
Outcome • Keep markup clean and easy to maintain
(LLOs) • Combine with custom CSS for flexibility
• Explore more Bootstrap utilities for advanced layouts

You might also like