Docsity
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Docsity AI
Docsity AI
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

Advanced Client-Side Development: Bootstrap 5 Grid System and Components, Lecture notes of Web Design and Development

Sri Lanka Institute of Information Technology (SLIT)Web Design and Development

An in-depth exploration of the bootstrap 5 grid system, including its structure, classes, and responsive properties. It also covers various bootstrap 5 components such as images, jumbotron, button groups, progress bars, spinners, and pagination. The document offers examples and explanations for each component, helping students understand how to effectively use these tools in their web development projects.

Typology: Lecture notes

2022/2023

Available from 05/25/2024

udhantha-ariyaratna
udhantha-ariyaratna 🇱🇰

4 documents

1 / 22

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Advanced Client-Side
Development
Lecture: 5 (part 02)
Bootstrap (Cont’d)
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16

Partial preview of the text

Download Advanced Client-Side Development: Bootstrap 5 Grid System and Components and more Lecture notes Web Design and Development in PDF only on Docsity!

Advanced Client-Side

Development

Lecture: 5 (part 02)

Bootstrap (Cont’d)

Bootstrap 5 Grid System

  • Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
  • If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.
  • The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
  • Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Basic Structure of a Bootstrap 5 Grid

See Example 4 and 5 (Bootstrap Examples)

Unequal responsive Column

  • .col-sm-4 .col-sm-8

Bootstrap 5 Images

Image syntax

  • Rounded Corners

  • Circle

  • Thumbnail

Responsive Images

  • Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
  • Create responsive images by adding an .img-fluid class to the tag. The image will then scale nicely to the parent element.

  • The .img-fluid class applies max-width: 100 %; and height: auto; to the image:

Bootstrap 5 Jumbotron

  • A jumbotron indicates a big grey box for calling extra attention to some special content or information.
  • Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes. - Bootstrap Tutorial

    Bootstrap is the most popular HTML, CSS...

Bootstrap 5 Button Groups

  • Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group.

  • Use a element with class .btn-group to create a button group:

    Apple Samsung Sony

Vertical Button Groups

  • Bootstrap 5 also supports vertical button groups.

  • Use the class .btn-group-vertical to create a vertical button group:

    Apple Samsung Sony

  • We can also have drop down menus in these buttons.

Spinners

  • To create a spinner/loader, use the .spinner-border class.

Spinner Buttons

Loading..

Loading..

Loading..

Basic Pagination

  • - Previous
  • 1 2 3 Next

Dropdowns

Dropdown button

Link 1 Link 2 Link 3