Welcome to Wedding Directory HTML Template.

Are You Vendor?List Your Business

Login

# Comoponets

### Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

##### Headings

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

##### Body Text

Maecenas eget metus quis justo semper malesuada id id leo. Mauris tristique libero mauris, vitae rutrum mi ultricies a. Vestibulum volutpat eu leo sit amet feugiat.

Pellentesque pellentesque elementum sem, eu interdum magna. Aenean vestibulum, erat vel tincidunt luctus, ex orci interdum est, ut vehicula erat massa ut purus. Nam sit amet odio quis ante bibendum faucibus. Mauris eleifend lobortis justo vel dictum. Aenean lobortis eleifend turpis, sit amet ullamcorper dui euismod at.

##### Inline Text

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.

##### Inline Text

#### Left aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

#### Center aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

#### Right aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

##### list

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Phasellus iaculis neque
7. Purus sodales ultricies
8. Vestibulum laoreet porttitor sem
9. Ac tristique libero volutpat at
10. Faucibus porta lacus fringilla vel
11. Aenean sit amet erat nunc
12. Eget porttitor lorem

### Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Buttons

#### Basic Buttons

Default Primary Secondary Success Danger Warning Info Light Dark

#### Outline Buttons

Default Primary Secondary Success Danger Warning Info Light Dark

#### Rounded Buttons

Default Primary Secondary Success Danger Warning Info Light Dark

#### Buttons Sizes

Large button Default button Small button XSmall button

#### Block Level Buttons

Block level button Block level button

#### Active State

Default Primary Secondary Success Danger Warning Info Light Dark

#### Radio Buttons

Active Radio Radio

### Color

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

##### Color

#### Background Color

.bg-default
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

#### Color

.text-default

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

### Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

##### Alerts Examples

#### Basic Alerts

This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!

#### Link Alerts

This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!

#### Additional Content

#### Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

#### Dismissing

Holy guacamole! You should check in on some of those fields below. ×

### Accordions

Using the card component, you can extend the default collapse behavior to create an accordion.

##### Accordion Style One

##### Accordion Heading Title here #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. gs occaecat craft.

##### Accordion Heading Title here #2

pidatat cred nesciunt sapiente ea proident. Ad vegan excepteur butcher viceLeggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

##### Accordion Heading Title here #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat you probably haven't heard of them accusamus.

##### Accordion Heading Title here #4

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat you probably haven't heard of them accusamus.

##### Accordion Heading Title here #5

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat you probably haven't heard of them accusamus.

### Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

##### Tabs Style

#### Tab #1

Luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus

etegestas diamenean in ante vitae sem sagittis condimentLuctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis cond ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.

#### Tab #2

Faucibus orci luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diamenean.

Morbi tempor suscipit augue sit amet sodaleuis volutpat pellentesque magnaut fringilla lacus tincidunt acaecenast estvel ut fringilla lacus tincidunt acaecenas idseron.

#### Tab #3

Urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.

Lacus sapienonec nibh just viverra sitamet exac lobortis faucibus est. Morbi suscipit est in luctus volutpatenean sollicitudin tincidunt estvel ut fringilla lacus tincidunt acaecenas idseron.

##### Pills Style

#### Tab #1

Luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus

etegestas diamenean in ante vitae sem sagittis condimentLuctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus egettitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis cond ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.

#### Tab #2

Faucibus orci luctuset ultrices posuere cubiliaurae urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diamenean.

Morbi tempor suscipit augue sit amet sodaleuis volutpat pellentesque magnaut fringilla lacus tincidunt acaecenast estvel ut fringilla lacus tincidunt acaecenas idseron.

#### Tab #3

Urabitur nonex rutrum elit lacinia faucibust eget est erosivamus eget porttitor nisiat volutpat felisras sed nisl dictum sagittis metus etegestas diamenean in ante vitae sem sagittis condiment ummetus etegestas diamenean in ante vitae sem sagittismetus etegestas diameneanin ante vitae.

Lacus sapienonec nibh just viverra sitamet exac lobortis faucibus est. Morbi suscipit est in luctus volutpatenean sollicitudin tincidunt estvel ut fringilla lacus tincidunt acaecenas idseron.

### Badges

Documentation and examples for badges, our small count and labeling component.

##### Badges Examples

#### Default Badges

Default Primary Secondary Success Danger Warning Info Light Dark

#### Contextual Variations

Default Primary Secondary Success Danger Warning Info Light Dark

#### Pill Badges

Default Primary Secondary Success Danger Warning Info Light Dark

#### Dot Badges

Default Primary Secondary Success Danger Warning Info Light Dark

#### Notification Badges

Notifications 4

### Tooltips & Popover

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

##### Tooltips & Popovers

#### Tooltip

#### Popovers

#### Four Directions

### Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

##### Examples

#### Live Demo

Launch demo modal

##### Modal title

×

Woohoo, You are readng this text in a modal! Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

### Paginations

Examples for showing pagination to indicate a series of related content exists across multiple pages.

##### Pagination

#### Default Pagination

#### Sizing

#### Working with icon

##### Images

##### Progress Bars

65%

##### Progress sm

##### Progress md

##### Progress lg

##### Progress xl

##### Breadcrumbs

### List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

##### List Group

#### Basic example

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

#### Flush List

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

#### Contextual classes

- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item

#### List with badge

- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1

#### Custom content

##### List group item heading

3 days ago

Donec 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 ago

Donec 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 ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

### Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

##### Basic Form

Input Text
Email address We'll never share your email with anyone else.
Number Input
Password
File Input
Example textarea

### Sizing

Small
Default
Large

### Would you like to connect with us