Grid
https://v5.getbootstrap.com/docs/5.0/layout/grid/Row columns
Gutters
https://v5.getbootstrap.com/docs/5.0/layout/gutters/Spacing
https://v5.getbootstrap.com/docs/5.0/utilities/spacing/Margins
Paddings
Sizing Bootstrap + Theme
https://v5.getbootstrap.com/docs/5.0/utilities/sizing/— scss/_theme-position.scss
Typography
https://v5.getbootstrap.com/docs/5.0/content/typography/Headings
h1 Bootstrap heading
h2 Bootstrap heading
h3 Bootstrap heading
h4 Bootstrap heading
h5 Bootstrap heading
h6 Bootstrap heading
Display headings
Lead
Letter wooded direct two men indeed income sister. Impression up admiration he by partiality is. Instantly immediate his saw one day perceived..
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Line height
.lh-1
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
.lh-sm
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
.lh-base
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
.lh-lg
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Blockquotes
In paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Without paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Typography Theme
Text massives:
.font-lg
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
none OR .font-base
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
.font-sm
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
.font-xsm
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
.font-xs-xsm
For mobiles only. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Headlines + text:
.h1 For pages and section
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
.h2 For pages and section
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
.h3 For pages and section
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
.h4 For blocks
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
.h5 For items
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
.h6 For items
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another.
Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of
Typography Lists ul, ol, dl
Ordered list ol
- Generic list item in one line
- A list item of multiple lines. Letter wooded direct two men indeed income sister. Impression up admiration he by partiality is. Instantly immediate his saw one day perceived. Old blushes respect but offices hearted minutes effects.
-
List item in one line
- A list item in one line. Level 2
-
Another one list item of multiple lines. Level 2. Sudden she seeing garret far regard. By hardly it direct if pretty up regret. Ability thought enquire settled prudent you sir. Or easy knew sold on well come year. Something consulted age extremely.
- Generic list item in one line. Level 3
- Another one list item in one line. Level 3
Unordered list ul
- Generic list item in one line
- A list item of multiple lines. Letter wooded direct two men indeed income sister. Impression up admiration he by partiality is. Instantly immediate his saw one day perceived. Old blushes respect but offices hearted minutes effects.
-
List item in one line
- A list item in one line. Level 2
-
Another one list item of multiple lines. Level 2. Sudden she seeing garret far regard. By hardly it direct if pretty up regret. Ability thought enquire settled prudent you sir. Or easy knew suld on well come year. Something consulted age extremely.
- Generic list item in one line. Level 3
- Another one list item in one line. Level 3
Styled Lists
- Question list?
- Is your landing page messaging focused on a single purpose?
- Is it clear who your company is and what you do?
- Is your primary headline phrased to answer the question “What is this page about?”
- Do you explain the value or size of your lead gen giveaway?
- Does your landing page appear to be professionally designed?
ol class="numlist"
-
This is list with text?
Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated.
-
Free consultation and check gager object?
On no applauded exquisite my additions. Pronounce add boy estimable nay suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked large style.
-
Sale of HVAC equipment with guarantee?
Doubtful two bed way pleasure confined followed. Shew up ye away no eyes life or were this. Perfectly did suspicion daughters but his intention.
-
Sale of HVAC equipment with guarantee?
Letter wooded direct two men indeed income sister. Impression up admiration he by partiality is. Instantly immediate his saw one day perceived. Old blushes respect but offices hearted minutes effects. Written parties winding oh as in without on started. Residence gentleman yet preserved few convinced. Coming regret simple longer little am sister on. Do danger in to adieus ladies houses oh eldest. Gone pure late gay ham. They sigh were not find are rent.
ol class="numlist numlist-lg"
- Question list?
- Is your landing page messaging focused on a single purpose?
- Is it clear who your company is and what you do?
- Is your primary headline phrased to answer the question “What is this page about?”
- Do you explain the value or size of your lead gen giveaway?
- Does your landing page appear to be professionally designed?
ol class="numlist numlist-lg"
- Question list?
- Is your landing page messaging focused on a single purpose?
- Is it clear who your company is and what you do?
- Is your primary headline phrased to answer the question “What is this page about?”
- Do you explain the value or size of your lead gen giveaway?
- Does your landing page appear to be professionally designed?
ul class="markerlist"
- Question list?
- Is your landing page messaging focused on a single purpose?
- Is it clear who your company is and what you do?
- Is your primary headline phrased to answer the question “What is this page about?”
- Do you explain the value or size of your lead gen giveaway?
- Does your landing page appear to be professionally designed?
ul class="markerlist-bgicon"
- li class="checked" Is your landing page messaging focused on a single purpose?
- li class="active" Is your landing page messaging focused on a single purpose?
- li class="active checked" Is your landing page messaging focused on a single purpose?
- Is your primary headline phrased to answer the question “What is this page about?”
ul class="markerlist-bgicon"
- Question list?
- Is your landing page messaging focused on a single purpose?
- Is it clear who your company is and what you do?
- Is your primary headline phrased to answer the question “What is this page about?”
- Do you explain the value or size of your lead gen giveaway?
- Does your landing page appear to be professionally designed?
ul class="markerlist-bgicon markerlist-check"
Inside .txt class
Sudden she seeing garret far regard. By hardly it direct if pretty up regret. Ability thought enquire settled prudent you sir. Or easy knew sold on well come year. Something consulted age extremely. Barton waited twenty always repair in within we do. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.
House it seven in spoil tiled court
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.
Through studied shyness evening
blockquote. Letter wooded direct two men indeed income sister. Impression up admiration he by partiality is. Instantly immediate his saw one day perceived. Old blushes respect but offices hearted minutes effects.
When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument.
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.
Alteration possession dispatched
An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.
Yourself off its pleasant ecstatic
Barton waited twenty always repair in within we do. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.
Sudden she seeing garret far regard. By hardly it direct if pretty up regret. Ability thought enquire settled prudent you sir. Or easy knew sold on well come year. Something consulted age extremely.
- Simple list
- Get the Mobile app
- Order checks
- Tell us you're
- Update address phone
- Open a new account
- Simple list
- Get the Mobile app
- Order checks
- Tell us you're
- Update address phone
- Open a new account
Colors
https://v5.getbootstrap.com/docs/5.0/utilities/colors/Colors Botstrap
Text
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
Colors Theme
Solid
Transparent
Inverse
link
link class link
paragraph
h1
h2
h3
h4
h5
h6
Borders
https://v5.getbootstrap.com/docs/5.0/utilities/colors/Additive
Subtractive
Border color
Border-width
Border-radius
Forms
https://v5.getbootstrap.com/docs/5.0/forms/overview/Forms
Input group
https://v5.getbootstrap.com/docs/5.0/forms/input-group/Select
Checks and radios
https://v5.getbootstrap.com/docs/5.0/forms/checks-radios/Range
Alerts
https://v5.getbootstrap.com/docs/5.0/components/alerts/Badges
https://v5.getbootstrap.com/docs/5.0/components/badge/Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Button badges
Pill badges
Primary Secondary Success Danger Warning Info Light DarkBreadcrumb
https://v5.getbootstrap.com/docs/5.0/components/breadcrumb/Buttons
https://v5.getbootstrap.com/docs/5.0/components/buttons/Outline buttons
Sizes
Button Group
https://v5.getbootstrap.com/docs/5.0/components/button-group/Carousel
https://v5.getbootstrap.com/docs/5.0/components/carousel/Collapse
https://v5.getbootstrap.com/docs/5.0/components/collapse/Accordion
Dropdowns
https://v5.getbootstrap.com/docs/5.0/components/dropdowns/Split button
Images & Figures
https://v5.getbootstrap.com/docs/5.0/content/images/ https://v5.getbootstrap.com/docs/5.0/content/figures/Image thumbnails
Figures
Listgroup
https://v5.getbootstrap.com/docs/5.0/components/list-group/- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Custom content
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.JavaScript behavior
Modal
https://v5.getbootstrap.com/docs/5.0/components/modal/Navs
https://v5.getbootstrap.com/docs/5.0/components/navs/Horizontal
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with .justify-content-center:
Right-aligned with .justify-content-end:
Vertical
Pills with dropdowns
Tabs
https://v5.getbootstrap.com/docs/5.0/components/navs/#tabsNavbar
https://v5.getbootstrap.com/docs/5.0/components/navbar/Pagination
https://v5.getbootstrap.com/docs/5.0/components/pagination/Popovers & Tooltips
https://v5.getbootstrap.com/docs/5.0/components/popovers/Popovers are opt-in for performance reasons, so you must initialize them yourself
Popovers
Tolltips
https://v5.getbootstrap.com/docs/5.0/components/tooltips/Spinners
https://v5.getbootstrap.com/docs/5.0/components/spinners/Shadows
https://v5.getbootstrap.com/docs/5.0/layout/gutters/Tables
https://v5.getbootstrap.com/docs/5.0/content/tables/# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Icons
inverse
Theme Font
themeicon-wifi
themeicon-snapchat-ghost
themeicon-sketch
themeicon-odnoklassniki
themeicon-medium-m
themeicon-adobe
themeicon-amazon
themeicon-amazon-pay
themeicon-app-store
themeicon-creative-commons
themeicon-facebook-messenger
themeicon-git
themeicon-trello
themeicon-dribbble
themeicon-facebook
themeicon-android
themeicon-apple
themeicon-blogger-b
themeicon-cc-amazon-pay
themeicon-cc-apple-pay
themeicon-cc-paypal
themeicon-cc-mastercard
themeicon-cc-jcb
themeicon-cc-discover
themeicon-cc-visa
themeicon-cc-amex
themeicon-cc-diners-club
themeicon-cc-stripe
themeicon-dropbox
themeicon-flickr
themeicon-flipboard
themeicon-github
themeicon-google-drive
themeicon-google
themeicon-instagram
themeicon-invision
themeicon-linkedin-in
themeicon-mailchimp
themeicon-paypal
themeicon-pinterest
themeicon-quora
themeicon-behance
themeicon-reddit-alien
themeicon-salesforce
themeicon-skype
themeicon-slack
themeicon-telegram-plane
themeicon-tumblr
themeicon-twitter
themeicon-vk
themeicon-viber
themeicon-whatsapp
themeicon-wikipedia-w
themeicon-wordpress-simple
themeicon-youtube
themeicon-yandex-international
themeicon-schedule
themeicon-account_balance
themeicon-account_balance_wallet
themeicon-add_shopping_cart
themeicon-airport_shuttle
themeicon-announcement
themeicon-arrow_back
themeicon-arrow_downward
themeicon-arrow_drop_down
themeicon-arrow_drop_up
themeicon-arrow_forward
themeicon-arrow_upward
themeicon-art_track
themeicon-flag
themeicon-attach_file
themeicon-attachment
themeicon-autorenew
themeicon-cloud_upload
themeicon-beach_access
themeicon-turned_in
themeicon-brightness_high
themeicon-build
themeicon-business_center
themeicon-cake
themeicon-phone
themeicon-call_end
themeicon-call_made
themeicon-call_received
themeicon-photo_camera
themeicon-redeem
themeicon-card_membership
themeicon-card_travel
themeicon-cast
themeicon-chat
themeicon-chat_bubble
themeicon-chat_bubble_outline
themeicon-check
themeicon-check_box
themeicon-check_box_outline_blank
themeicon-check_circle
themeicon-cloud_done
themeicon-cloud_download
themeicon-comment
themeicon-content_cut
themeicon-content_paste
themeicon-mode_edit
themeicon-payment
themeicon-description
themeicon-desktop_windows
themeicon-phonelink
themeicon-dialpad
themeicon-directions_bike
themeicon-directions_car
themeicon-drafts
themeicon-markunread
themeicon-error
themeicon-face
themeicon-favorite
themeicon-favorite_border
themeicon-get_app
themeicon-file_upload
themeicon-find_in_page
themeicon-flash_on
themeicon-folder
themeicon-folder_open
themeicon-format_color_text
themeicon-format_shapes
themeicon-free_breakfast
themeicon-gavel
themeicon-star
themeicon-people
themeicon-group_add
themeicon-headset_mic
themeicon-help
themeicon-home
themeicon-photo
themeicon-import_contacts
themeicon-info
themeicon-insert_drive_file
themeicon-link
themeicon-keyboard_arrow_down
themeicon-keyboard_arrow_left
themeicon-keyboard_arrow_right
themeicon-keyboard_arrow_up
themeicon-keyboard_voice
themeicon-language
themeicon-laptop_mac
themeicon-lightbulb_outline
themeicon-local_bar
themeicon-local_florist
themeicon-shopping_cart
themeicon-theaters
themeicon-local_offer
themeicon-print
themeicon-room
themeicon-lock_open
themeicon-lock_outline
themeicon-mail_outline
themeicon-map
themeicon-monetization_on
themeicon-nature
themeicon-near_me
themeicon-new_releases
themeicon-notifications_active
themeicon-ondemand_video
themeicon-open_in_browser
themeicon-person
themeicon-person_add
themeicon-phone_android
themeicon-pin_drop
themeicon-play_circle_filled
themeicon-play_circle_outline
themeicon-power_settings_new
themeicon-public
themeicon-visibility
themeicon-remove_shopping_cart
themeicon-warning
themeicon-school
themeicon-sd_storage
themeicon-search
themeicon-security
themeicon-send
themeicon-settings
themeicon-share
themeicon-textsms
themeicon-star_border
themeicon-storage
themeicon-style
themeicon-thumb_up
themeicon-timeline
themeicon-timer
themeicon-trending_up
themeicon-tune
themeicon-verified_user
themeicon-videocam
themeicon-voice_chat
themeicon-volume_up
themeicon-vpn_key
themeicon-watch_later
themeicon-wb_incandescent
themeicon-wc
themeicon-wifi1
themeicon-work