Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Five grid

Many customers ask about 5 grid in bootstrap is col-24 in this grid you can divide columns into 5 parts or 20% width.

One of five columns

            
              <div class="container">
                <div class="row">
                  <div class="col-24">
                    One of five columns
                  </div>
                  <div class="col-24">
                    One of five columns
                  </div>
                  <div class="col-24">
                    One of five columns
                  </div>
                  <div class="col-24">
                    One of five columns
                  </div>
                  <div class="col-24">
                    One of five columns
                  </div>
                </div>
              </div>

5 grid is also responsive like other grid, you can use .col-sm-24, .col-md-24, col-lg-24, .col-lg-24, .col-xl-24, .col-xxl-24

More grid

More grid can read in Official Bootstrap Documentation

Z-index

While not a part of Bootstrap’s grid system, z-indexes play an important part in how our components overlay and interact with one another.

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Our z-index class list:

Z-index minus

            
              .z-index-n100 {
  z-index: -100;
}
.z-index-n10 {
  z-index: -10;
}
.z-index-n5 {
  z-index: -5;
}
.z-index-n4 {
  z-index: -4;
}
.z-index-n3 {
  z-index: -3;
}
.z-index-n2 {
  z-index: -2;
}
.z-index-n1 {
  z-index: -1;
}

Z-index

            
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.z-index-5 {
  z-index: 5;
}
.z-index-10 {
  z-index: 10;
}
.z-index-20 {
  z-index: 20;
}
.z-index-50 {
  z-index: 50;
}
.z-index-100 {
  z-index: 100;
}

Typography

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

Headings

All HTML headings, <h1> through <h6>, are available.

`<h1></h1>`	h1. heading
`<h2></h2>`	h2. heading
`<h3></h3>`	h3. heading
`<h4></h4>`	h4. heading
`<h5></h5>`	h5. heading
`<h6></h6>`	h6. heading

            
              <h1>h1. heading</h1>
              <h2>h2. heading</h2>
              <h3>h3. heading</h3>
              <h4>h4. heading</h4>
              <h5>h5. heading</h5>
              <h6>h6. heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

            
              <p class="h1">h1. heading</p>
              <p class="h2">h2. heading</p>
              <p class="h3">h3. heading</p>
              <p class="h4">h4. heading</p>
              <p class="h5">h5. heading</p>
              <p class="h6">h6. heading</p>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

            
              <h1 class="display-1">Display 1</h1>
              <h1 class="display-2">Display 2</h1>
              <h1 class="display-3">Display 3</h1>
              <h1 class="display-4">Display 4</h1>
              <h1 class="display-5">Display 5</h1>
              <h1 class="display-6">Display 6</h1>

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

            
              <p class="lead text-muted">
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
              </p>

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote u-blockquote"> around any HTML as the quote.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Integer posuere erat a ante.

Quote by Ari Budin

            
              <blockquote class="blockquote u-blockquote">
                <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Integer posuere erat a ante.</p>
                <footer class="blockquote-footer">Quote by <cite title="Source Title">Ari Budin</cite></footer>
              </blockquote>

Dropcaps

Add a dropcaps for make big font in start your article.

Aenean sodales lacus est, at ultricies augue ele ifend sit amet. Be yourself everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes.

            
              <p><span class="dropcaps">A</span>enean sodales lacus est, at ultricies augue ele ifend sit amet. 
              everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. 
              Orci varius natoque penatibus et magnis dis parturient montes.</p>

RFS

RFS resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.

What is RFS?

Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

See the example below for source Sass and compiled CSS.

            
              .title {
							  @include font-size(4rem);
							}

Css will generate like this

            
              .title {
							  font-size: calc(1.525rem + 3.3vw);
							}

							@media (max-width: 1200px) {
							  .title {
							    font-size: 4rem;
							  }
							}

For more information about RFS read in here

Forms

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

Form Input pill

Make rounded form style with add form-pill class in form-controll.

            
              <form>
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">Email address</label>
                  <input type="email" class="form-control form-pill" id="exampleInputEmail1" aria-describedby="emailHelp">
                </div>
                <div class="mb-3">
                  <label for="exampleInputPassword1" class="form-label">Password</label>
                  <input type="password" class="form-control form-pill" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>

You can read more documentation about forms in here Bootstrap Documentation

Animate Css

To sweeten the design, we make a simple animate css that can be used on certain elements.

Move

Make animate up and down with add .animated-up-down classes.

Example code

            
              <img class="img-fluid animated-up-down" src="src/img-min/svg/start_up.svg" alt="images title">

Hover

Make animate move up if hover with add .hover-box-up classes.

Example code

            
              <img class="img-fluid hover-box-up" src="src/img-min/svg/start_up.svg" alt="images title">

Avatars

Examples avatar classes for opting different size of image.

Example

Avatar classes are applied to the image so that it scales with the parent element.

            
              <img class="avatar-xs" src="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm" src="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-md" src="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg" src="src/img-min/img1-small.jpg" alt="Image Description">

Bordered and rounded circle

Use bordered classes to wrap .avatar- elements with rounded circle.

            
              <img class="avatar-xs rounded-circle border border-light border-2" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm rounded-circle border border-light border-3" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-md rounded-circle border border-light border-4" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg rounded-circle border border-light border-5" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">

Bordered and Shadow

Use bordered classes to wrap .avatar- elements with shadow.

            
              <img class="avatar-xs border border-light border-2 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm border border-light border-3 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-md border border-light border-4 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg border border-light border-5 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">

Avatar Group

Create avatar group with add .avatar-group classes.

            
              <div class="avatar-group">
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img1-small.jpg" alt="Image Description">
                </a>
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img2-small.jpg" alt="Image Description">
                </a>
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img3-small.jpg" alt="Image Description">
                </a>
              </div>

Background Video

Create background video embeds with parallax in section area.

Example

With this element you can make video background with title and description in cover pages. Responsive in any device, just copy youtube url and paste in here, very simple.

Example Text

Copy and paste following code

            
              <!-- video start -->
              <div id="hero" class="section">
                <!-- Background YouTube Parallax -->
                <div class="jarallax py-8 py-md-9 border-bottom z-index-1" data-jarallax-video="https://www.youtube.com/watch?v=6stlCkUDG_s">
                <div class="container">
                  <div class="row justify-content-center">
                    <!-- content -->
                    <div class="col-lg-7" data-aos="fade-up">
                      <div class="text-center">
                        <h1 class="text-white">Example Text</h1>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>
              <!-- end video -->

Just replece following

https://www.youtube.com/watch?v=6stlCkUDG_s
Use this amazing feature on the background of any sections....

This also can applied in html video or vimeo video, just editing small code.

Buttons

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

Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

            
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-secondary">Secondary</button>
              <button type="button" class="btn btn-success">Success</button>
              <button type="button" class="btn btn-danger">Danger</button>
              <button type="button" class="btn btn-warning">Warning</button>
              <button type="button" class="btn btn-info">Info</button>
              <button type="button" class="btn btn-light">Light</button>
              <button type="button" class="btn btn-dark">Dark</button>
              <button type="button" class="btn btn-link">Link</button>
              <button type="button" class="btn btn-white">White</button>
              <button type="button" class="btn btn-black">Black</button>

Pill Button

            
              <button type="button" class="btn btn-pill btn-primary">Primary</button>
              <button type="button" class="btn btn-pill btn-secondary">Secondary</button>
              <button type="button" class="btn btn-pill btn-success">Success</button>
              <button type="button" class="btn btn-pill btn-danger">Danger</button>
              <button type="button" class="btn btn-pill btn-warning">Warning</button>
              <button type="button" class="btn btn-pill btn-info">Info</button>
              <button type="button" class="btn btn-pill btn-light">Light</button>
              <button type="button" class="btn btn-pill btn-dark">Dark</button>
              <button type="button" class="btn btn-pill btn-link">Link</button>
              <button type="button" class="btn btn-pill btn-white">White</button>
              <button type="button" class="btn btn-pill btn-black">Black</button>

Circle Button

            
              <button type="button" class="btn btn-circle btn-lg btn-primary">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-play" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-secondary">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-play-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-success">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-plus" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z" clip-rule="evenodd"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-danger">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-power" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M5.578 4.437a5 5 0 104.922.044l.5-.866a6 6 0 11-5.908-.053l.486.875z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M7.5 8V1h1v7h-1z" clip-rule="evenodd"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-warning">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" class="bi bi-share" fill="currentColor"><path fill-rule="evenodd" d="M13.5 1a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM11 2.5a2.5 2.5 0 11.603 1.628l-6.718 3.12a2.499 2.499 0 010 1.504l6.718 3.12a2.5 2.5 0 11-.488.876l-6.718-3.12a2.5 2.5 0 110-3.256l6.718-3.12A2.5 2.5 0 0111 2.5zm-8.5 4a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm11 5.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"></path></svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-info">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-cursor" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M14.082 2.182a.5.5 0 01.103.557L8.528 15.467a.5.5 0 01-.917-.007L5.57 10.694.803 8.652a.5.5 0 01-.006-.916l12.728-5.657a.5.5 0 01.556.103zM2.25 8.184l3.897 1.67a.5.5 0 01.262.263l1.67 3.897L12.743 3.52 2.25 8.184z" clip-rule="evenodd"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-light">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-download" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M.5 8a.5.5 0 01.5.5V12a1 1 0 001 1h12a1 1 0 001-1V8.5a.5.5 0 011 0V12a2 2 0 01-2 2H2a2 2 0 01-2-2V8.5A.5.5 0 01.5 8z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M5 7.5a.5.5 0 01.707 0L8 9.793 10.293 7.5a.5.5 0 11.707.707l-2.646 2.647a.5.5 0 01-.708 0L5 8.207A.5.5 0 015 7.5z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M8 1a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 1z" clip-rule="evenodd"></path>
                    </svg>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-circle btn-lg btn-dark">
                <span class="position-relative">
                  <span class="icon-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" class="bi bi-cloud-download" fill="currentColor"><path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 018 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 010-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 00-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 010 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path fill-rule="evenodd" d="M7.646 15.854a.5.5 0 00.708 0l3-3a.5.5 0 00-.708-.708L8.5 14.293V5.5a.5.5 0 00-1 0v8.793l-2.146-2.147a.5.5 0 00-.708.708l3 3z"></path></svg>
                  </span>
                </span>
              </button>

Social Buttons

This is extra social button for make your project easy, this button use fontawesome & bootstrap classes.

Facebook Twitter Instagram Telegram Pinterest Youtube Vimeo Linkedin VKontakte Whatsapp

            
              <a href="#" class="btn btn-facebook">
                <!-- <i class="fab fa-facebook"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/></svg>
                Facebook
              </a>
              <a href="#" class="btn btn-twitter">
                <!-- <i class="fab fa-twitter"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/></svg>
                Twitter
              </a>
              <a href="#" class="btn btn-instagram">
                <!-- <i class="fab fa-instagram"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>
                Instagram
              </a>
              <a href="#" class="btn btn-telegram">
                <!-- <i class="fab fa-telegram"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                Telegram
              </a>
              <a href="#" class="btn btn-pinterest">
                <!-- <i class="fab fa-pinterest"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256.05,32c-123.7,0-224,100.3-224,224,0,91.7,55.2,170.5,134.1,205.2-.6-15.6-.1-34.4,3.9-51.4,4.3-18.2,28.8-122.1,28.8-122.1s-7.2-14.3-7.2-35.4c0-33.2,19.2-58,43.2-58,20.4,0,30.2,15.3,30.2,33.6,0,20.5-13.1,51.1-19.8,79.5-5.6,23.8,11.9,43.1,35.4,43.1,42.4,0,71-54.5,71-119.1,0-49.1-33.1-85.8-93.2-85.8-67.9,0-110.3,50.7-110.3,107.3,0,19.5,5.8,33.3,14.8,43.9,4.1,4.9,4.7,6.9,3.2,12.5-1.1,4.1-3.5,14-4.6,18-1.5,5.7-6.1,7.7-11.2,5.6-31.3-12.8-45.9-47-45.9-85.6,0-63.6,53.7-139.9,160.1-139.9,85.5,0,141.8,61.9,141.8,128.3,0,87.9-48.9,153.5-120.9,153.5-24.2,0-46.9-13.1-54.7-27.9,0,0-13,51.6-15.8,61.6-4.7,17.3-14,34.5-22.5,48a225.13,225.13,0,0,0,63.5,9.2c123.7,0,224-100.3,224-224S379.75,32,256.05,32Z"/></svg>
                Pinterest
              </a>
              <a href="#" class="btn btn-youtube">
                <!-- <i class="fab fa-youtube"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"/></svg>
                Youtube
              </a>
              <a href="#" class="btn btn-vimeo">
                <!-- <i class="fab fa-vimeo"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M476.9,114c-5-23.39-17.51-38.78-40.61-46.27s-64.92-4.5-94.12,16.79c-26.79,19.51-46.26,54.42-54,78.28a4,4,0,0,0,5.13,5c10.77-3.8,21.72-7.1,34-6.45,15,.8,24.51,12,24.91,25.29.3,9.79-.2,18.69-3.6,27.68C337.87,243,321,270.78,301.06,295.07a72.49,72.49,0,0,1-10,9.89c-10.21,8.29-18.81,6.1-25.41-5.2-5.4-9.29-9-18.88-12.2-29.08-12.4-39.67-16.81-80.84-23.81-121.52-3.3-19.48-7-39.77-18-56.86-11.6-17.79-28.61-24.58-50-22-14.7,1.8-36.91,17.49-47.81,26.39,0,0-56,46.87-81.82,71.35l21.2,27s17.91-12.49,27.51-18.29c5.7-3.39,12.4-4.09,17.2.2,4.51,3.9,9.61,9,12.31,14.1,5.7,10.69,11.2,21.88,14.7,33.37,13.2,44.27,25.51,88.64,37.81,133.22,6.3,22.78,13.9,44.17,28,63.55,19.31,26.59,39.61,32.68,70.92,21.49,25.41-9.09,46.61-26.18,66-43.87,33.11-30.18,59.12-65.36,85.52-101.14C433.59,270,450.49,242,464.59,210.72,478.5,179.74,484,147.26,476.9,114Z"/></svg>
                Vimeo
              </a>
              <a href="#" class="btn btn-linkedin">
                <!-- <i class="fab fa-linkedin"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>
                Linkedin
              </a>
              <a href="#" class="btn btn-vk">
                <!-- <i class="fab fa-vk"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M484.7,132c3.56-11.28,0-19.48-15.75-19.48H416.58c-13.21,0-19.31,7.18-22.87,14.86,0,0-26.94,65.6-64.56,108.13-12.2,12.3-17.79,16.4-24.4,16.4-3.56,0-8.14-4.1-8.14-15.37V131.47c0-13.32-4.06-19.47-15.25-19.47H199c-8.14,0-13.22,6.15-13.22,12.3,0,12.81,18.81,15.89,20.84,51.76V254c0,16.91-3,20-9.66,20-17.79,0-61-66.11-86.92-141.44C105,117.64,99.88,112,86.66,112H33.79C18.54,112,16,119.17,16,126.86c0,13.84,17.79,83.53,82.86,175.77,43.21,63,104.72,96.86,160.13,96.86,33.56,0,37.62-7.69,37.62-20.5V331.33c0-15.37,3.05-17.93,13.73-17.93,7.62,0,21.35,4.09,52.36,34.33C398.28,383.6,404.38,400,424.21,400h52.36c15.25,0,22.37-7.69,18.3-22.55-4.57-14.86-21.86-36.38-44.23-62-12.2-14.34-30.5-30.23-36.09-37.92-7.62-10.25-5.59-14.35,0-23.57-.51,0,63.55-91.22,70.15-122" style="fill-rule:evenodd"/></svg>
                VKontakte
              </a>
              <a href="#" class="btn btn-success">
                <!-- <i class="fab fa-whatsapp"></i> -->
                <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M414.73,97.1A222.14,222.14,0,0,0,256.94,32C134,32,33.92,131.58,33.87,254A220.61,220.61,0,0,0,63.65,365L32,480l118.25-30.87a223.63,223.63,0,0,0,106.6,27h.09c122.93,0,223-99.59,223.06-222A220.18,220.18,0,0,0,414.73,97.1ZM256.94,438.66h-.08a185.75,185.75,0,0,1-94.36-25.72l-6.77-4L85.56,427.26l18.73-68.09-4.41-7A183.46,183.46,0,0,1,71.53,254c0-101.73,83.21-184.5,185.48-184.5A185,185,0,0,1,442.34,254.14C442.3,355.88,359.13,438.66,256.94,438.66ZM358.63,300.47c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54,2.78-14.4,18-17.65,21.75-6.5,4.16-12.07,1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56,2.44-11.32c2.51-2.49,5.57-6.48,8.36-9.72s3.72-5.56,5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53,20.53,0,0,0-14.86,6.94c-5.11,5.56-19.51,19-19.51,46.28s20,53.68,22.76,57.38,39.3,59.73,95.21,83.76a323.11,323.11,0,0,0,31.78,11.68c13.35,4.22,25.5,3.63,35.1,2.2,10.71-1.59,33-13.42,37.63-26.38s4.64-24.06,3.25-26.37S364.21,303.24,358.63,300.47Z" style="fill-rule:evenodd"/></svg>
                Whatsapp
              </a>

You also can use button size with add .btn-lg or .btn-sm

Apps Button

This button for make Apps download link

Download on the App Store Get it on Google Play Download on the App Store Get it on Google Play

            
              <!--App store button-->
              <a class="btn btn-dark btn-app text-white text-start hover-button-up mb-2 me-4" href="https://itunes.apple.com">
                <span class="d-flex align-items-center">
                  <!--icon-->
                  <span class="me-2">
                    <!-- <span class="fab fa-apple font-size-2"></span> -->
                     <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256,32C132.26,32,32,132.26,32,256S132.26,480,256,480,480,379.74,480,256,379.74,32,256,32ZM171,353.89a15.48,15.48,0,0,1-13.46,7.65,14.91,14.91,0,0,1-7.86-2.16,15.48,15.48,0,0,1-5.6-21.21l15.29-25.42a8.73,8.73,0,0,1,7.54-4.3h2.26c11.09,0,18.85,6.67,21.11,13.13Zm129.45-50L200.32,304H133.77a15.46,15.46,0,0,1-15.51-16.15c.32-8.4,7.65-14.76,16-14.76h48.24l57.19-97.35h0l-18.52-31.55C217,137,218.85,127.52,226,123a15.57,15.57,0,0,1,21.87,5.17l9.9,16.91h.11l9.91-16.91A15.58,15.58,0,0,1,289.6,123c7.11,4.52,8.94,14,4.74,21.22l-18.52,31.55-18,30.69-39.09,66.66v.11h57.61c7.22,0,16.27,3.88,19.93,10.12l.32.65c3.23,5.49,5.06,9.26,5.06,14.75A13.82,13.82,0,0,1,300.48,303.92Zm77.75.11H351.09v.11l19.82,33.71a15.8,15.8,0,0,1-5.17,21.53,15.53,15.53,0,0,1-8.08,2.27A15.71,15.71,0,0,1,344.2,354l-29.29-49.86-18.2-31L273.23,233a38.35,38.35,0,0,1-.65-38c4.64-8.19,8.19-10.34,8.19-10.34L333,273h44.91c8.4,0,15.61,6.46,16,14.75A15.65,15.65,0,0,1,378.23,304Z"/></svg>
                  </span>
                  <!--text-->
                  <span class="app-text">
                    <span class="small d-block">Download on the</span>
                    <strong>App Store</strong>
                  </span><!--end text-->
                </span>
              </a>

              <!--google play-->
              <a class="btn btn-dark btn-app text-white text-start hover-button-up mb-2 me-4" href="https://play.google.com">
                <span class="d-flex align-items-center">
                  <!--icon-->
                  <span class="me-2">
                    <!-- <span class="fab fa-google-play font-size-2"></span> -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M48,59.49v393a4.33,4.33,0,0,0,7.37,3.07L260,256,55.37,56.42A4.33,4.33,0,0,0,48,59.49Z"/><path d="M345.8,174,89.22,32.64l-.16-.09c-4.42-2.4-8.62,3.58-5,7.06L285.19,231.93Z"/><path d="M84.08,472.39c-3.64,3.48.56,9.46,5,7.06l.16-.09L345.8,338l-60.61-57.95Z"/><path d="M449.38,231l-71.65-39.46L310.36,256l67.37,64.43L449.38,281C468.87,270.23,468.87,241.77,449.38,231Z"/></svg>
                  </span>
                  <!--text-->
                  <span class="app-text">
                    <span class="d-block small">Get it on</span>
                    <strong>Google Play</strong>
                  </span><!--end text-->
                </span>
              </a>
              <!--end google play-->

              <!--App store button-->
              <a class="btn btn-light btn-app text-start hover-button-up mb-2 me-4" href="https://itunes.apple.com">
                <span class="d-flex align-items-center">
                  <!--icon-->
                  <span class="me-2">
                    <!-- <span class="fab fa-apple font-size-2"></span> -->
                     <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256,32C132.26,32,32,132.26,32,256S132.26,480,256,480,480,379.74,480,256,379.74,32,256,32ZM171,353.89a15.48,15.48,0,0,1-13.46,7.65,14.91,14.91,0,0,1-7.86-2.16,15.48,15.48,0,0,1-5.6-21.21l15.29-25.42a8.73,8.73,0,0,1,7.54-4.3h2.26c11.09,0,18.85,6.67,21.11,13.13Zm129.45-50L200.32,304H133.77a15.46,15.46,0,0,1-15.51-16.15c.32-8.4,7.65-14.76,16-14.76h48.24l57.19-97.35h0l-18.52-31.55C217,137,218.85,127.52,226,123a15.57,15.57,0,0,1,21.87,5.17l9.9,16.91h.11l9.91-16.91A15.58,15.58,0,0,1,289.6,123c7.11,4.52,8.94,14,4.74,21.22l-18.52,31.55-18,30.69-39.09,66.66v.11h57.61c7.22,0,16.27,3.88,19.93,10.12l.32.65c3.23,5.49,5.06,9.26,5.06,14.75A13.82,13.82,0,0,1,300.48,303.92Zm77.75.11H351.09v.11l19.82,33.71a15.8,15.8,0,0,1-5.17,21.53,15.53,15.53,0,0,1-8.08,2.27A15.71,15.71,0,0,1,344.2,354l-29.29-49.86-18.2-31L273.23,233a38.35,38.35,0,0,1-.65-38c4.64-8.19,8.19-10.34,8.19-10.34L333,273h44.91c8.4,0,15.61,6.46,16,14.75A15.65,15.65,0,0,1,378.23,304Z"/></svg>
                  </span>
                  <!--text-->
                  <span class="app-text">
                    <span class="small d-block">Download on the</span>
                    <strong>App Store</strong>
                  </span><!--end text-->
                </span>
              </a>

              <!--google play-->
              <a class="btn btn-light btn-app text-start hover-button-up mb-2 me-4" href="https://play.google.com">
                <span class="d-flex align-items-center">
                  <!--icon-->
                  <span class="me-2">
                    <!-- <span class="fab fa-google-play font-size-2"></span> -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M48,59.49v393a4.33,4.33,0,0,0,7.37,3.07L260,256,55.37,56.42A4.33,4.33,0,0,0,48,59.49Z"/><path d="M345.8,174,89.22,32.64l-.16-.09c-4.42-2.4-8.62,3.58-5,7.06L285.19,231.93Z"/><path d="M84.08,472.39c-3.64,3.48.56,9.46,5,7.06l.16-.09L345.8,338l-60.61-57.95Z"/><path d="M449.38,231l-71.65-39.46L310.36,256l67.37,64.43L449.38,281C468.87,270.23,468.87,241.77,449.38,231Z"/></svg>
                  </span>
                  <!--text-->
                  <span class="app-text">
                    <span class="d-block small">Get it on</span>
                    <strong>Google Play</strong>
                  </span><!--end text-->
                </span>
              </a>
              <!--end google play-->

Play Button

This button for make play button with effect

            
              <div id="preview-video">
                <a aria-label="" href="https://www.youtube.com/watch?v=BGPSIUZdTkc" class="btn btn-circle btn-lg btn-white position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-play-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                    </svg>
                    <div class="play-btn"></div>
                  </span>
                </a>
              </div>
              
              <div id="preview-video2">
                <a id="preview-video2" aria-label="" href="https://www.youtube.com/watch?v=BGPSIUZdTkc" class="btn btn-circle btn-lg btn-white position-relative">
                  <span class="icon-center">
                    <svg class="bi bi-play-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                    </svg>
                    <div class="play-btn-hover"></div>
                  </span>
                </a>
              </div>

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link

            
              <a class="btn btn-primary" href="#" role="button">Link</a>
              <button class="btn btn-primary" type="submit">Button</button>
              <input class="btn btn-primary" type="button" value="Input" />
              <input class="btn btn-primary" type="submit" value="Submit" />
              <input class="btn btn-primary" type="reset" value="Reset" />

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

            
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-secondary">Secondary</button>
              <button type="button" class="btn btn-outline-success">Success</button>
              <button type="button" class="btn btn-outline-danger">Danger</button>
              <button type="button" class="btn btn-outline-warning">Warning</button>
              <button type="button" class="btn btn-outline-info">Info</button>
              <button type="button" class="btn btn-outline-light text-dark">Light</button>
              <button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

            
              <button type="button" class="btn btn-primary btn-lg">Large button</button>
              <button type="button" class="btn btn-secondary btn-lg">Large button</button>

            
              <button type="button" class="btn btn-primary btn-sm">Small button</button>
              <button type="button" class="btn btn-secondary btn-sm">Small button</button>

Block button

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

            
              <div class="d-grid gap-2">
                <button class="btn btn-primary" type="button">Button</button>
                <button class="btn btn-primary" type="button">Button</button>
              </div>

For more documentation about button, you read in Bootstrap Documentation

Cards

yaghout cards provide a flexible and extensible content container with multiple variants and options.

Card Blogs

Card for make blog grid layout.

Great Layout and Grid

04 May 2020

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است

Creative

New UI Design for 2020

04 May 2020

            
              <!-- Card -->
              <div class="card blog-two border-0 mb-4 mb-lg-0 rounded-3 overflow-hidden shadow-sm">
                <div class="blog-two-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog3.jpg" alt="alt title">
                  </a>
                </div>
                <div class="card-body">
                  <span class="blog-author">
                    <a href="#"><img class="avatar-md mt-n-2 rounded-circle" src="assets/img-min/avatar/img3-small.jpg" alt="avatar"></a>
                  </span>
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">Great Layout and Grid</a></h3>
                    <div class="text-muted">
                      <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                        <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                      </svg><span>04 May 2020</span>
                    </div>
                  </div>
                  <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
                </div>
              </div><!-- End card -->

              <!-- Card -->
              <div class="card blog-one border-0 mb-4 mb-lg-0 rounded-3 overflow-hidden shadow-sm">
                <div class="blog-one-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog1.jpg" alt="">
                  </a>
                  <div class="blog-one-category p-2 bg-primary">
                    <a class="text-white font-size-75" href="#">Creative</a>
                  </div>
                </div>
                <div class="card-body">
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                    <div class="text-muted">
                      <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                        <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                      </svg><span>04 May 2020</span>
                    </div>
                  </div>
                  <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
                </div>
              </div><!-- end card -->

12 May

New UI Design for 2020

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Maecenas in pulvinar neque.

New UI Design for 2020

04 May 2020

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Maecenas in pulvinar neque.

            
              <!-- Card -->
              <div class="card blog-three rounded-3 overflow-hidden border-0 mb-4 mb-lg-0">
                <div class="blog-three-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog1.jpg" alt="">
                  </a>
                  <div class="post-date bg-light p-2">
                    <span class="date">12</span>
                    <span class="small">May</span>
                  </div>
                </div>
                <div class="card-body px-0">
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                  </div>
                  <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Maecenas in pulvinar neque.</p>
                </div>
              </div><!-- end card -->

              <!-- Card -->
              <div class="card blog-two mb-4 mb-lg-0 border-0 rounded-3 overflow-hidden hover-shadow-sm z-index-1">
                 <div class="z-index-n1">
                    <a href="#">
                      <img class="img-fluid" src="src/img-min/blog/blog1.jpg" alt="">
                    </a>
                 </div>
                 <div class="card-body bg-white text-center mx-4 mt-n6">
                    <div class="card-title">
                      <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                      <div class="text-muted">
                        <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                          <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg><span>04 May 2020</span>
                      </div>
                    </div>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ Maecenas in pulvinar neque.</p>
                 </div>
              </div><!-- end card -->

You can read full documentation about card in Bootstrap Documentation

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin..

Dropdown example

            
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </div>
              <br>
              <!-- Example split success button -->
              <div class="btn-group">
                <button type="button" class="btn btn-success">Action</button>
                <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                  <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>
              <br><br>
              <div class="dropdown">
                <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown button
                </button>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                  <li><a class="dropdown-item active" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>

Dropdown Submenu

This is Dropdown menu with list submenu, this dropdown submenu also supported dropdown reverse.
If used sub dropdown menu, you must add this css .dropdown-submenu in parent submenu and .submenu in next dropdown-menu.

                
                  <!--dropdown submenu-->
                  <li class="nav-item dropdown">
                    <a id="navbarhome" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
                    <!--link-->
                    <ul class="dropdown-menu dropdown-menu-lg-center" aria-labelledby="navbarhome">
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub2" class="dropdown-item dropdown-toggle" href="#">Pages</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub2">
                          <li class="dropdown-submenu">
                            <a id="sub350" class="dropdown-item dropdown-toggle" href="#">
                            Basic</a>
                            <!--child submenu-->
                            <ul class="submenu dropdown-menu" aria-labelledby="sub350">
                              <li><a class="dropdown-item" href="#">404</a></li>
                              <li><a class="dropdown-item" href="#">Classic</a></li>
                              <li><a class="dropdown-item" href="#">Coming Soon</a></li>
                              <li><a class="dropdown-item" href="#">FAQ</a></li>
                              <li><a class="dropdown-item" href="#">Term of Use</a></li>
                            </ul>
                            <!--End child submenu-->
                          </li>
                          <li><a class="dropdown-item" href="#">About</a></li>
                          <li><a class="dropdown-item" href="#">Career</a></li>
                          <li><a class="dropdown-item" href="#">Contact</a></li>
                          <li><a class="dropdown-item" href="#">Portfolio</a></li>
                          <li><a class="dropdown-item" href="#">Pricing</a></li>
                          <li><a class="dropdown-item" href="#">Services</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub22" class="dropdown-item dropdown-toggle" href="#">Blogs</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub22">
                          <li><a class="dropdown-item" href="#">Blog</a></li>
                          <li><a class="dropdown-item" href="#">Search</a></li>
                          <li><a class="dropdown-item" href="#">Author</a></li>
                          <li><a class="dropdown-item" href="#">Single Article</a></li>
                          <li><a class="dropdown-item" href="#">Classic Article</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub221" class="dropdown-item dropdown-toggle" href="#">Users</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub221">
                          <li><a class="dropdown-item" href="#">Login</a></li>
                          <li><a class="dropdown-item" href="#">Register</a></li>
                          <li><a class="dropdown-item" href="#">Recover</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                    </ul>
                    <!-- end link -->
                  </li>

You can read more documentation about dropdown in Bootstrap documentation.

Dropdown Mega Menu

Documentation and examples for powerful, and responsive navigation mega menu.

Mega menu

This is mega menu with icons and list menu

Home

Corporate

Agency

Company

Coworking

Course

Portfolio

App & Others

Default

Mobile App

Desktop App

Personal

StartUp coming soon

Pre-build landing pages for your your personal and business site.
Menu
Menu
Menu

                
                  <!--mega menu with header banner-->
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbarDropdown1">
                      Home
                    </a>
                    <div class="dropdown-menu dropdown-md dropdown-menu-lg-center py-0" aria-labelledby="navbarDropdown1">
                      <div class="row g-0">
                        <div class="col-12 col-md-6">
                          <div class="dropdown-md-area">
                            <p class="dropdown-md-title">Corporate</p>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-briefcase" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-6h-1v6a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-6H0v6z"/>
                                  <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5v2.384l-7.614 2.03a1.5 1.5 0 0 1-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 0 0-.5.5v1.616l6.871 1.832a.5.5 0 0 0 .258 0L15 6.116V4.5a.5.5 0 0 0-.5-.5h-13zM5 2.5A1.5 1.5 0 0 1 6.5 1h3A1.5 1.5 0 0 1 11 2.5V3h-1v-.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V3H5v-.5z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Agency</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"/>
                                  <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Company</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1h7.956a.274.274 0 0 0 .014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 0 0 .022.004zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Coworking</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-easel" viewBox="0 0 16 16">
                                  <path d="M8.473.337a.5.5 0 0 0-.946 0L6.954 2h2.092L8.473.337zM12.15 11h-1.058l1.435 4.163a.5.5 0 0 0 .946-.326L12.15 11zM8.5 11h-1v2.5a.5.5 0 0 0 1 0V11zm-3.592 0H3.85l-1.323 3.837a.5.5 0 1 0 .946.326L4.908 11z"/>
                                  <path fill-rule="evenodd" d="M14 3H2v7h12V3zM2 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Course</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M12.002 4h-10a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1zm-10-1a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-10zm4 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                  <path fill-rule="evenodd" d="M4 2h10a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1v1a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2h1a1 1 0 0 1 1-1z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Portfolio</p>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class="col-12 col-md-6 bg-light">
                          <div class="dropdown-md-area">
                            <p class="dropdown-md-title">App & Others</p>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-braces" viewBox="0 0 16 16">
                                  <path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Default</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app-indicator" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
                                  <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Mobile App</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-laptop" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M13.5 3h-11a.5.5 0 0 0-.5.5V11h12V3.5a.5.5 0 0 0-.5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11z"/>
                                  <path d="M0 12h16v.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5V12z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Desktop App</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                                  <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">Personal</p>
                              </div>
                            </a>
                            <a class="dropdown-item d-flex" href="#">
                              <div class="drop-icon bg-primary text-light rounded-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-puzzle" viewBox="0 0 16 16">
                                  <path d="M4.605 2.5V2v.5zM3.61 3.6l.498-.043V3.55l-.498.05zM7 2.5h.5A.5.5 0 0 0 7 2v.5zm-.676 1.454l.304.397-.304-.397zm3.352 0l-.304.397.304-.397zM9 2.5V2a.5.5 0 0 0-.5.5H9zm3.39 1.1l-.498-.05v.007l.498.043zM12.1 7l-.498-.043a.5.5 0 0 0 .498.543V7zm1.854-.676l.397.304-.397-.304zm0 3.352l.397-.304-.397.304zM12.1 9v-.5a.5.5 0 0 0-.498.542L12.1 9zm.29 3.4l-.498.043v.007l.498-.05zM9 13.5h-.5a.5.5 0 0 0 .5.5v-.5zm.676-1.454l-.304-.397.304.397zm-3.352 0l.304-.397-.304.397zM7 13.5v.5a.5.5 0 0 0 .5-.5H7zm-2.395 0V13v.5zm-.995-1.1l.498.05v-.007L3.61 12.4zM3.9 9l.498.042A.5.5 0 0 0 3.9 8.5V9zm-1.854.676l-.397-.304.397.304zm0-3.352l-.397.304.397-.304zM3.9 7v.5a.5.5 0 0 0 .498-.543L3.9 7zm.705-5a1.5 1.5 0 0 0-1.493 1.65l.995-.1A.5.5 0 0 1 4.605 3V2zM7 2H4.605v1H7V2zm.5.882V2.5h-1v.382h1zm-.872 1.469c.375-.287.872-.773.872-1.469h-1c0 .195-.147.42-.48.675l.608.794zM6.5 4.5l.001-.006a.113.113 0 0 1 .012-.025.459.459 0 0 1 .115-.118l-.608-.794c-.274.21-.52.528-.52.943h1zM8 5c-.491 0-.912-.1-1.19-.24a.86.86 0 0 1-.271-.194.213.213 0 0 1-.039-.063V4.5h-1c0 .568.447.947.862 1.154C6.807 5.877 7.387 6 8 6V5zm1.5-.5v.003a.213.213 0 0 1-.039.064.86.86 0 0 1-.27.193C8.91 4.9 8.49 5 8 5v1c.613 0 1.193-.123 1.638-.346.415-.207.862-.586.862-1.154h-1zm-.128-.15c.065.05.099.092.115.119.008.013.01.021.012.025L9.5 4.5h1c0-.415-.246-.733-.52-.943l-.608.794zM8.5 2.883c0 .696.497 1.182.872 1.469l.608-.794c-.333-.255-.48-.48-.48-.675h-1zm0-.382v.382h1V2.5h-1zm2.895-.5H9v1h2.395V2zm1.493 1.65A1.5 1.5 0 0 0 11.395 2v1a.5.5 0 0 1 .498.55l.995.1zm-.29 3.392l.29-3.4-.996-.085-.29 3.4.996.085zm.284-.542H12.1v1h.782v-1zm.675-.48c-.255.333-.48.48-.675.48v1c.696 0 1.182-.497 1.469-.872l-.794-.608zm.943-.52c-.415 0-.733.246-.943.52l.794.608a.459.459 0 0 1 .118-.115.113.113 0 0 1 .025-.012L14.5 6.5v-1zM16 8c0-.613-.123-1.193-.346-1.638-.207-.415-.586-.862-1.154-.862v1h.003l.01.003a.237.237 0 0 1 .053.036.86.86 0 0 1 .194.27c.14.28.24.7.24 1.191h1zm-1.5 2.5c.568 0 .947-.447 1.154-.862C15.877 9.193 16 8.613 16 8h-1c0 .491-.1.912-.24 1.19a.86.86 0 0 1-.194.271.214.214 0 0 1-.063.039H14.5v1zm-.943-.52c.21.274.528.52.943.52v-1l-.006-.001a.113.113 0 0 1-.025-.012.458.458 0 0 1-.118-.115l-.794.608zm-.675-.48c.195 0 .42.147.675.48l.794-.608c-.287-.375-.773-.872-1.469-.872v1zm-.782 0h.782v-1H12.1v1zm.788 2.858l-.29-3.4-.996.084.29 3.401.996-.085zM11.395 14a1.5 1.5 0 0 0 1.493-1.65l-.995.1a.5.5 0 0 1-.498.55v1zM9 14h2.395v-1H9v1zm.5-.5v-.382h-1v.382h1zm0-.382c0-.195.147-.42.48-.675l-.608-.794c-.375.287-.872.773-.872 1.469h1zm.48-.675c.274-.21.52-.528.52-.943h-1l-.001.006a.113.113 0 0 1-.012.025.459.459 0 0 1-.115.118l.608.794zm.52-.943c0-.568-.447-.947-.862-1.154C9.193 10.123 8.613 10 8 10v1c.492 0 .912.1 1.19.24.14.07.226.14.271.194a.214.214 0 0 1 .039.063v.003h1zM8 10c-.613 0-1.193.123-1.638.346-.415.207-.862.586-.862 1.154h1v-.003l.003-.01a.214.214 0 0 1 .036-.053.859.859 0 0 1 .27-.194C7.09 11.1 7.51 11 8 11v-1zm-2.5 1.5c0 .415.246.733.52.943l.608-.794a.459.459 0 0 1-.115-.118.113.113 0 0 1-.012-.025L6.5 11.5h-1zm.52.943c.333.255.48.48.48.675h1c0-.696-.497-1.182-.872-1.469l-.608.794zm.48.675v.382h1v-.382h-1zM4.605 14H7v-1H4.605v1zm-1.493-1.65A1.5 1.5 0 0 0 4.605 14v-1a.5.5 0 0 1-.498-.55l-.995-.1zm.29-3.393l-.29 3.401.996.085.29-3.4-.996-.086zm-.284.543H3.9v-1h-.782v1zm-.675.48c.255-.333.48-.48.675-.48v-1c-.696 0-1.182.497-1.469.872l.794.608zm-.943.52c.415 0 .733-.246.943-.52l-.794-.608a.459.459 0 0 1-.118.115.112.112 0 0 1-.025.012L1.5 9.5v1zM0 8c0 .613.123 1.193.346 1.638.207.415.586.862 1.154.862v-1h-.003a.213.213 0 0 1-.064-.039.86.86 0 0 1-.193-.27C1.1 8.91 1 8.49 1 8H0zm1.5-2.5c-.568 0-.947.447-1.154.862C.123 6.807 0 7.387 0 8h1c0-.492.1-.912.24-1.19a.86.86 0 0 1 .194-.271.213.213 0 0 1 .063-.039H1.5v-1zm.943.52c-.21-.274-.528-.52-.943-.52v1l.006.001a.112.112 0 0 1 .025.012c.027.016.068.05.118.115l.794-.608zm.675.48c-.195 0-.42-.147-.675-.48l-.794.608c.287.375.773.872 1.469.872v-1zm.782 0h-.782v1H3.9v-1zm-.788-2.858l.29 3.4.996-.085-.29-3.4-.996.085z"/>
                                </svg>
                              </div>
                              <div class="drop-text">
                                <p class="fw-medium">StartUp <span class="badge small bg-primary ms-2">coming soon</span></p>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class="col-12 border-top text-center">
                          <div class="p-3 small">Pre-build landing pages for your your personal and business site.</div>
                        </div>
                      </div>
                    </div>
                  </li>

Medium menu with Svg icons

This is a medium dropdown menu with svg icons

                
                  <!--medium menu with svg icon-->
                  <li class="nav-item dropdown">
                    <a id="navbarmd" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>

                    <div class="dropdown-menu dropdown-menu-md dropdown-menu-lg-center p-4" aria-labelledby="navbarmd">
                      <div class="list-group list-group-flush">
                        <a class="list-group-item dropdown-item d-flex align-item-center" href="#">
                          <!-- Icon -->
                          <div class="align-self-center text-primary">
                            <svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><path stroke="currentColor" d='M416,221.25V416a48,48,0,0,1-48,48H144a48,48,0,0,1-48-48V96a48,48,0,0,1,48-48h98.75a32,32,0,0,1,22.62,9.37L406.63,198.63A32,32,0,0,1,416,221.25Z' style='fill:none;stroke-linejoin:round;stroke-width:32px'/><path stroke="currentColor" d='M256,56V176a32,32,0,0,0,32,32H408' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='288' x2='336' y2='288' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='368' x2='336' y2='368' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                          </div>

                          <!-- Content -->
                          <div class="ms-4 align-self-center">
                            <h6 class="fw-medium text-uppercase mb-0">
                              Documentation
                            </h6>
                            <p class="text-light-blue mb-0">
                              Development guides
                            </p>
                          </div>
                        </a>

                        <a class="list-group-item dropdown-item d-flex align-item-center" href="#">
                          <!-- Icon -->
                          <div class="align-self-center text-primary">
                            <svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><rect stroke="currentColor" x='48' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='48' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                          </div>

                          <!-- Content -->
                          <div class="ms-4 align-self-center">
                            <h6 class="fw-medium text-uppercase mb-0">
                              Components
                            </h6>
                            <p class="text-light-blue mb-0">
                              Full list of components
                            </p>
                          </div>
                        </a>

                        <a class="list-group-item dropdown-item d-flex align-item-center" href="#">
                          <!-- Icon -->
                          <div class="align-self-center text-primary">
                            <svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><polyline stroke="currentColor" points='160 368 32 256 160 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='352 368 480 256 352 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='304' y1='96' x2='208' y2='416' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                          </div>

                          <!-- Content -->
                          <div class="ms-4 align-self-center">
                            <h6 class="fw-medium text-uppercase mb-0">
                              Changelog
                            </h6>
                            <p class="text-light-blue mb-0">
                              Keep track of changes
                            </p>
                          </div>

                          <!-- Badge -->
                          <span class="badge bg-light text-primary rounded-md ms-auto align-self-center">
                            1.0.0
                          </span>
                        </a>
                      </div>
                    </div>
                  </li>

You can settings this mega menu in hover or click style. If you want to use click style, just remove class .hover-navbar from main-nav navbar navbar-expand-lg hover-navbar

Mobile menu

We have two navigation style sidebar mobile menu and Dropdown mobile menu

Sidebar mobile menu

This component make your mobile view have sidebar menu, this will showing from right after click mobile navigation menu.

              
                <!-- sidebar mobile menu -->
                <div class="mobile-side">
                  <!-- Mobile menu-->
                  <div id="back-menu" class="back-menu back-menu-end">
                    <span class="hamburger-icon open">
                      <svg class="bi bi-x" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                        <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"></path>
                      </svg>
                    </span>
                  </div>
                  <nav id="mobile-menu" class="menu-mobile d-flex flex-column push push-end bg-white">
                    <!-- mobile menu content -->
                    <div class="mobile-content mb-auto">
                      <!--logo-->
                      <div class="logo-sidenav px-5 mb-4">
                        <a href="#" class="d-flex">
                          <span class="h2 text-primary fw-bold mt-2 align-self-center">Yaghout</span>
                          <!-- <img src="assets/img-min/logo/logo.png" class="img-fluid" alt="logo"> -->
                        </a>
                      </div>
                      <!--navigation-->
                      <div class="sidenav-menu side-light">
                        <nav class="navbar navbar-inverse">
                          <ul id="side-menu" class="nav navbar-nav list-group list-unstyled side-link">
                            <li><a href="#" class="nav-link">Home</a></li>
                            <li><a href="#" class="nav-link">Features</a></li>
                            <li><a href="#" class="nav-link">Pricing</a></li>

                            <!-- dropdown menu start -->
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle dropdown-item" id="menu-12" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                              <!-- dropdown content -->
                              <ul class="dropdown-menu side-drop">
                                <li><a href="#" class="dropdown-item">Dropdown item</a></li>
                                <li class="dropdown-submenu">
                                  <a href="#" class="dropdown-item dropdown-toggle" id="menu-13">Dropdown item</a>
                                  <!-- dropdown submenu -->
                                  <ul class="submenu dropdown-menu side-drop">
                                    <li><a href="#" class="dropdown-item">Dropdown item</a></li>
                                  </ul>
                                </li>
                                <li class="dropdown-submenu">
                                  <a href="#" class="dropdown-item dropdown-toggle" id="menu-14">Dropdown item</a>
                                  <ul class="submenu dropdown-menu side-drop">
                                    <li><a href="#" class="dropdown-item">Dropdown item</a></li>
                                    <li><a href="#" class="dropdown-item">Dropdown item</a></li>
                                    <li><a href="#" class="dropdown-item">Dropdown item</a></li>
                                  </ul>
                                </li>
                              </ul>
                            </li><!-- end dropdown menu -->

                            <li><a href="#" class="nav-link">About</a></li>
                            <li><a href="#" class="nav-link">Contact</a></li>
                          </ul>
                        </nav>
                      </div>
                    </div>
                    <!-- copyright mobile sidebar menu -->
                    <div class="mobile-copyright mt-5 text-center">
                      <p class="text-light-blue">All right reserved</p>
                    </div>
                  </nav>
                </div>
                <!-- end sidebar mobile menu -->

If you want move this sidebar menu to left, edit this class back-menu-end and push-end replace with back-menu-start and push-start.

Trigger this function with add class="sidebar-menu-trigger".

              
                <!-- navbar button -->
                <button aria-label="sidebar menu" class="navbar-toggler sidebar-menu-trigger" type="button">
                  <span class="navbar-toggler-icon"></span>
                </button>

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Default Navbar

This is navbar with default style

	              
                  <!-- ========== { HEADER }==========  -->
                  <header>
                    <!-- Navbar -->
                    <nav class="main-nav navbar navbar-expand-lg hover-navbar dark-to-light fixed-top navbar-dark">
                      <div class="container">
                        <a class="navbar-brand main-logo" href="#">
                          <!-- <span class="h2 text-white fw-bold mt-2">Yaghout</span> -->
                          <img class="logo-dark" src="../../src/img-min/logo/logo.png" alt="LOGO">
                        </a>

                        <!-- navbar toggler -->
                        <button class="navbar-toggler" type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#navbarTogglerDemo"
                          aria-controls="navbarTogglerDemo"
                          aria-expanded="false"
                          aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- collapse menu -->
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo">
                          <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                            <============================
                            insert your navlink, dropdown and mega menu in here
                            =============================>
                          </ul>
                          <div class="d-grid d-lg-block my-3 my-lg-0 ms-0 ms-lg-4">
                            <a class="btn btn-warning btn-sm" target="_blank" rel="noopener" href="#">
                              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                              Buy Now
                            </a>
                          </div>
                        </div><!-- end collapse menu -->
                      </div><!-- End Navbar -->
                    </nav>
                  </header><!-- end header -->

One Page Navbar

We combine navbar one page with scrollspy

                
                  <!-- ========== { HEADER }==========  -->
                  <header>
                    <!-- Navbar -->
                    <nav id="main-nav" class="main-nav navbar navbar-expand-lg hover-navbar dark-to-light fixed-top navbar-dark">
                      <div class="container">
                        <a class="navbar-brand main-logo" href="#">
                          <!-- <span class="h2 text-white fw-bold mt-2">Yaghout</span> -->
                          <img class="logo-dark" src="../../src/img-min/logo/logo.png" alt="LOGO">
                        </a>

                        <!-- navbar toggler -->
                        <button class="navbar-toggler" type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#navbarTogglerDemo"
                          aria-controls="navbarTogglerDemo"
                          aria-expanded="false"
                          aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- collapse menu -->
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo">
                          <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger active" href="#hero">Home</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger" href="#features">Features</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger" href="#faq">Faq</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger" href="#reviews">Reviews</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link js-scroll-trigger" href="#contact">Contacts</a>
                            </li>
                          </ul>
                          <div class="d-grid d-lg-block my-3 my-lg-0 ms-0 ms-lg-4">
                            <a class="btn btn-warning btn-sm" target="_blank" rel="noopener" href="#">
                              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                              Buy Now
                            </a>
                          </div>
                        </div><!-- end collapse menu -->
                      </div><!-- End Navbar -->
                    </nav>
                  </header><!-- end header -->

For trigger scrollspy functions, you must add id="main-nav" in navbar code

Add scrollspy in one page navigation

For make scrollspy efect in navigation you must add code in html element.

Add scrollspy code in body like this

                
                  <body id="page-top" data-bs-spy="scroll" data-bs-target="#main-nav" data-bs-offset="92">

Navbar Expand

In default navbar custom from yaghout use navbar-expand-lg. If you want to change navbar expand to -md,-xl or other viewport,

You must change src/scss/yaghout/navbar.scss line 132 and 241

And src/scss/yaghout/submenu.scss line 108 and 134

                
                // navbar in mobile
                @include media-breakpoint-down(lg) {
                  .navbar-expand {
                    &-lg {

                    // code

                    }
                  }
                }

                // navbar in desktop
                @include media-breakpoint-up(lg) {
                  .navbar-expand {
                    &-lg {

                    // code

                    }
                  }
                }

Change (lg) with your navbar-expand-

If you want to use yaghout navbar in all expand viewport ( sm, md, lg, xl and xxl )

Replace code with this scss

                
                // navbar in mobile
                .navbar-expand {
                  @each $breakpoint in map-keys($grid-breakpoints) {
                    $next: breakpoint-next($breakpoint, $grid-breakpoints);
                    $infix: breakpoint-infix($next, $grid-breakpoints);
                    &#{$infix} {
                      @include media-breakpoint-down($next) {

                      // code

                      }
                    }
                  }
                }

                // navbar in desktop
                .navbar-expand {
                  @each $breakpoint in map-keys($grid-breakpoints) {
                    $next: breakpoint-next($breakpoint, $grid-breakpoints);
                    $infix: breakpoint-infix($next, $grid-breakpoints);
                    &#{$infix} {
                      @include media-breakpoint-up($next) {

                      // code

                      }
                    }
                  }
                }

Particles

Make your landing page more atractive with add particles css.

Particles move up

Add particles css with moving up

            
              <!-- rocket moving up animation -->
              <div class="particle">
                <div class="particle-move-up d-none d-lg-block particle-move-up-1 text-light z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up particle-move-up-2 text-light z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up d-none d-sm-block particle-move-up-3 text-light z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up d-none d-xl-block particle-move-up-4 text-light z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up d-none d-sm-block particle-move-up-5 text-light z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up border-success text-light particle-move-up-6 z-index-n1 opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up particle-move-up-7 z-index-n1 text-light opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up particle-move-up-8 z-index-n1 text-light opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
                <div class="particle-move-up particle-move-up-9 z-index-n1 text-light opacity-60">
                  <svg xmlns="http://www.w3.org/2000/svg" class="rotate-315" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path class="text-warning" fill="currentColor" d="M109.64,352a45.06,45.06,0,0,0-26.35,12.84C65.67,382.52,64,448,64,448s65.52-1.67,83.15-19.31A44.73,44.73,0,0,0,160,402.32" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                </div> 
              </div>

Change rocket icon with easy way, just replace with svg icon code from Bootstrap icons or Ionicons. Color and z-index also can change from svg code.

Scroll rotate

Rotate element if scroll up or down

Subcribe Newsletter

Subscribe to our mailing list to receives daily updates!

            
              <!-- =========={ SUBCRIBE }==========  -->
              <div id="subcribe" class="section pt-7 pb-8 bg-white overflow-hidden">
                <!-- particle moving animation -->
                <div class="particle">
                  <div class="scroll-rotate position-absolute opacity-50 text-primary z-index-n1" style="right:9%;bottom: 72%;">
                    <svg class="bi bi-bounding-box-circles" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-warning z-index-n1" style="right:12%;bottom: 30%;">
                    <svg class="bi bi-bounding-box-circles" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-danger d-none d-lg-block z-index-n1" style="right:22%;bottom: 55%;">
                    <svg class="bi bi-bounding-box-circles" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-danger d-none d-lg-block z-index-n1" style="left:40%;top: 20%;">
                    <svg class="bi bi-bounding-box-circles" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-primary z-index-n1" style="left:60%;bottom: 20%;">
                    <svg class="bi bi-bounding-box-circles" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-warning z-index-n1" style="left:20%;bottom: 60%;">
                    <svg class="bi bi-bounding-box-circles" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-primary z-index-n1" style="left:12%;bottom: 30%;">
                    <svg class="bi bi-bounding-box-circles" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <div class="scroll-rotate position-absolute opacity-50 text-success z-index-n1" style="left:6%;bottom:75%;">
                    <svg class="bi bi-bounding-box-circles" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" clip-rule="evenodd"></path>
                      <path fill-rule="evenodd" d="M14 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM2 3a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zm0 11a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>

                <div class="container">
                  <div class="row justify-content-center">
                    <div class="col-8 col-md-6" data-aos="fade-up">
                      <!-- Title -->
                      <div class="text-center mx-auto mb-4">
                        <svg class="bi bi-envelope-open text-primary mb-4" width="5rem" height="5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M.243 6.929l.514-.858L8 10.417l7.243-4.346.514.858L8 11.583.243 6.93z" clip-rule="evenodd"></path>
                          <path fill-rule="evenodd" d="M7.184 10.68L.752 14.432l-.504-.864L6.68 9.816l.504.864zm1.632 0l6.432 3.752.504-.864L9.32 9.816l-.504.864z" clip-rule="evenodd"></path>
                          <path fill-rule="evenodd" d="M8.47 1.318a1 1 0 00-.94 0l-6 3.2A1 1 0 001 5.4V14a1 1 0 001 1h12a1 1 0 001-1V5.4a1 1 0 00-.53-.882l-6-3.2zM7.06.435a2 2 0 011.882 0l6 3.2A2 2 0 0116 5.4V14a2 2 0 01-2 2H2a2 2 0 01-2-2V5.4a2 2 0 011.059-1.765l6-3.2z" clip-rule="evenodd"></path>
                        </svg>
                        <h2><span class="fw-light">Subcribe</span> Newsletter</h2>
                        <hr class="divider my-4 mx-auto bg-warning border-warning">
                        <p class="lead tect-light-blue mb-0">Subscribe to our mailing list to receives daily updates!</p>
                      </div><!-- End Title -->

                      <!--form-->
                      <div class="mx-auto">
                        <form id="subscribe1" class="needs-validation" action="#" novalidate="">
                          <div class="row">
                            <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                              <input type="email" class="form-control" id="email" placeholder="Email address" name="email">
                            </div>
                            <div class="col-12 col-lg-4">
                              <button type="submit" class="btn btn-primary btn-block mb-2">Subcribe!</button>
                            </div>
                          </div>
                        </form>
                      </div><!--end form-->
                    </div>
                  </div>
                </div><!-- end subcribe -->
              </div><!-- End Contact Form -->

Ribbon

Add ribbon in left or right any element.

Installation

Add ribbon element in card, pricing or other element with paste following code.

Large

              
                <!-- ribbon left lg-->
                <div class="ribbon ribbon-lg ribbon-start z-index-10">
                  <span class="bg-success">Large</span>
                </div>
                <!-- ribbon right lg-->
                <div class="ribbon ribbon-lg ribbon-end z-index-10">
                  <span class="bg-success">Large</span>
                </div>

Medium

              
                <!-- ribbon left md-->
                <div class="ribbon ribbon-md ribbon-start z-index-10">
                  <span class="bg-success">Medium</span>
                </div>
                <!-- ribbon right md-->
                <div class="ribbon ribbon-md ribbon-end z-index-10">
                  <span class="bg-success">Medium</span>
                </div>

Small

              
                <!-- ribbon left sm-->
                <div class="ribbon ribbon-sm ribbon-start z-index-10">
                  <span class="bg-success">Small</span>
                </div>
                <!-- ribbon right sm-->
                <div class="ribbon ribbon-sm ribbon-end z-index-10">
                  <span class="bg-success">Small</span>
                </div>

Dont forget to add position relative in parent this code

Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Spinners example

            
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-secondary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-success" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-warning" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-info" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-light" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-dark" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

Preloader

Preloader is the what you see on some sites before the main content of the web page is loaded.

Example code

            
              <!-- preloader -->
              <div id="preloader" class="preloader bg-light">
                <div class="position-absolute start-50 top-50 translate-middle-x">
                  <div class="position-relative mx-auto my-5">
                    <!-- bootstrap spinner -->
                    <div class="spinner-border text-primary" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                  </div>
                </div>
              </div>

Add loader-wrapper just below the body tag

If you want to replace loading style, you can replace bootstrap spinner with images or custom loading.

You can read more documentation about spinners in Bootstrap documentation.

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 SVG Icon

Tabs with svg icons

tabs one

tabs two

tabs three

tabs four

              
                <ul class="row text-center g-0 tab-profile nav nav-tabs border-bottom-0" id="nav-tab" role="tablist">
                  <li class="col-6 col-lg-3">
                    <a class="rounded-0 active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
                      <!-- navigate block -->
                      <div class="p-4 p-lg-5">
                        <div class="mb-2 text-primary">
                          <!-- icon -->
                          <svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><path stroke="currentColor" d='M80,212V448a16,16,0,0,0,16,16h96V328a24,24,0,0,1,24-24h80a24,24,0,0,1,24,24V464h96a16,16,0,0,0,16-16V212' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><path stroke="currentColor" d='M480,256,266.89,52c-5-5.28-16.69-5.34-21.78,0L32,256' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='400 179 400 64 352 64 352 133' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                        </div>
                        <h4 class="h5 mb-0">Home</h4>
                      </div><!-- end navigate block -->
                    </a>
                  </li>
                  <li class="col-6 col-lg-3">
                    <a class="rounded-0" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">
                      <!-- navigate block -->
                      <div class="p-4 p-lg-5">
                        <div class="mb-2 text-primary">
                          <!-- icon -->
                          <svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><rect stroke="currentColor" x='96' y='48' width='320' height='416' rx='48' ry='48' style='fill:none;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='128' x2='336' y2='128' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='208' x2='336' y2='208' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='288' x2='256' y2='288' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                        </div>
                        <h4 class="h5 mb-0">Services</h4>
                      </div><!-- end navigate block -->
                    </a>
                  </li>
                  <li class="col-6 col-lg-3">
                    <a class="rounded-0" id="nav-portfolio-tab" data-bs-toggle="tab" href="#nav-portfolio" role="tab" aria-controls="nav-portfolio" aria-selected="false">
                      <!-- navigate block -->
                      <div class="p-4 p-lg-5">
                        <div class="mb-2 text-primary">
                          <!-- icon -->
                          <svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><path stroke="currentColor" d='M440,432H72a40,40,0,0,1-40-40V120A40,40,0,0,1,72,80h75.89a40,40,0,0,1,22.19,6.72l27.84,18.56A40,40,0,0,0,220.11,112H440a40,40,0,0,1,40,40V392A40,40,0,0,1,440,432Z' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='32' y1='192' x2='480' y2='192' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                        </div>
                        <h4 class="h5 mb-0">Portfolio</h4>
                      </div><!-- end navigate block -->
                    </a>
                  </li>
                  <li class="col-6 col-lg-3">
                    <a class="rounded-0" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">
                      <!-- navigate block -->
                      <div class="p-4 p-lg-5">
                        <div class="mb-2 text-primary">
                          <!-- icon -->
                          <svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><rect stroke="currentColor" x='48' y='96' width='416' height='320' rx='40' ry='40' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='112 160 256 272 400 160' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
                        </div>
                        <h4 class="h5 mb-0">Contact</h4>
                      </div><!-- end navigate block -->
                    </a>
                  </li>
                </ul>
                <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    tabs one
                  </div>

                  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    tabs two
                  </div>

                  <div class="tab-pane fade" id="nav-portfolio" role="tabpanel" aria-labelledby="nav-portfolio-tab">
                    tabs three
                  </div>

                  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                    tabs four
                  </div>
                </div>

You can read full documentation about tabs in Bootstrap Documentation

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts example

Hello, world! This is a toast message.

            
              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                  <img src="..." class="rounded me-2" alt="...">
                  <strong class="me-auto">Bootstrap</strong>
                  <small>11 mins ago</small>
                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                  Hello, world! This is a toast message.
                </div>
              </div>

You can read more documentation about popovers in Bootstrap documentation.

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Text Color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-black-50

.text-white

.text-light-70

.text-white-50

            
              <p class="text-primary">.text-primary</p>
              <p class="text-secondary">.text-secondary</p>
              <p class="text-success">.text-success</p>
              <p class="text-danger">.text-danger</p>
              <p class="text-warning">.text-warning</p>
              <p class="text-info">.text-info</p>
              <p class="text-light bg-dark">.text-light</p>
              <p class="text-dark">.text-dark</p>
              <p class="text-body">.text-body</p>
              <p class="text-muted">.text-muted</p>
              <p class="text-black-50">.text-black-50</p>
              <p class="text-white bg-dark">.text-white</p>
              <p class="text-light-70 bg-dark">.text-light-70</p>
              <p class="text-white-50 bg-dark">.text-white-50</p>

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no link styling.

            
              <p><a href="#" class="text-primary">Primary link</a></p>
              <p><a href="#" class="text-secondary">Secondary link</a></p>
              <p><a href="#" class="text-success">Success link</a></p>
              <p><a href="#" class="text-danger">Danger link</a></p>
              <p><a href="#" class="text-warning">Warning link</a></p>
              <p><a href="#" class="text-info">Info link</a></p>
              <p><a href="#" class="text-light bg-dark">Light link</a></p>
              <p><a href="#" class="text-dark">Dark link</a></p>
              <p><a href="#" class="text-muted">Muted link</a></p>
              <p><a href="#" class="text-white bg-dark">White link</a></p>

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you'll want to use .text-* utilities.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-black

.bg-transparent

            
              <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
              <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
              <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
              <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
              <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
              <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
              <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
              <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
              <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
              <div class="p-3 mb-2 bg-black text-white">.bg-black</div>
              <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Background Gradient

.bg-gradient-primary

.bg-gradient-secondary

            
              <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-primary</div>
              <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-secondary</div>

Opacity

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.

Examples

            
             <img src="../assets/img-min/img1.jpg" class="opacity-50" alt="Example" />
             <img src="../assets/img-min/img1.jpg" class="opacity-60" alt="Example" />
             <img src="../assets/img-min/img1.jpg" class="opacity-70" alt="Example" />
             <img src="../assets/img-min/img1.jpg" class="opacity-80" alt="Example" />
             <img src="../assets/img-min/img1.jpg" class="opacity-90" alt="Example" />
             <img src="../assets/img-min/img1.jpg" class="opacity-100" alt="Example" />

Notation

The classes are named using the format {property}-{size}.

Where property is one of:

opacity - for classes that set opacity

Where size is one of:

0 - (by default) for classes that set the opacity to 0 (transparent)
10 - (by default) for classes that set the opacity to .1
20 - (by default) for classes that set the opacity to .2
30 - (by default) for classes that set the opacity to .3
40 - (by default) for classes that set the opacity to .4
50 - (by default) for classes that set the opacity to .5
60 - (by default) for classes that set the opacity to .6
70 - (by default) for classes that set the opacity to .7
80 - (by default) for classes that set the opacity to .8
90 - (by default) for classes that set the opacity to .9
100 - (by default) for classes that set the opacity to 1 (normal)

Overlay

Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. Creating an overlay effect means to put two div together at the same place.

Example Overlay

Add overlay css with background color and opacity.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione

            
              <div class="position-relative p-5" style="background-image: url('src/img-min/bg/bg-business.jpg');">
                <div class="overlay bg-gradient-primary opacity-80"></div>
                <div class="position-relative">
                  <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione</p>
                </div>
              </div>
              <div class="position-relative p-5" style="background-image: url('src/img-min/bg/bg-business.jpg');">
                <div class="overlay bg-warning opacity-80"></div>
                <div class="position-relative">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione</p>
                </div>
              </div>

Easy to change color and customize opacity

            
              <div class="overlay bg-primary opacity-80"></div>
              <div class="overlay bg-danger opacity-50"></div>
              <div class="overlay bg-warning opacity-60"></div>

Rotate

Use this class to rotate element.

Example

Add classes to an element to easily rotate your images.

            
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-45" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-90" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-135" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-180" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-225" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-270" alt="Example" />
              <img src="../assets/img-min/img1.jpg" class="rounded-circle rotate-315" alt="Example" />

Shadows

Add or remove shadows to elements with `box-shadow` utilities.

Examples Shadow

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow

Small shadow

Regular shadow

Larger shadow

Right Bottom shadow

Bottom shadow

            
              <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
              <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
              <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
              <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
              <div class="shadow-right-bottom p-3 mb-5 bg-white rounded">Right Bottom shadow</div>
              <div class="shadow-bottom p-3 mb-5 bg-white rounded">Bottom shadow</div>

Spacing

yaghout includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

Margin and Padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - for classes that set margin-left or padding-left
e - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to .25
2 - (by default) for classes that set the margin or padding to .5
3 - (by default) for classes that set the margin or padding to 1
4 - (by default) for classes that set the margin or padding to 1.5
5 - (by default) for classes that set the margin or padding to 3
6 - (by default) for classes that set the margin or padding to 4.5
7 - (by default) for classes that set the margin or padding to 6
8 - (by default) for classes that set the margin or padding to 7.5
9 - (by default) for classes that set the margin or padding to 9
auto - for classes that set the margin to auto

            
              <div class="ms-1">margin left .25rem</div>
              <div class="me-2">margin right .5rem</div>
              <div class="mt-3">margin top 1rem</div>
              <div class="mb-4">margin bottom 1.5rem</div>
              <div class="mx-6">margin horizontal 4.5rem</div>
              <div class="my-7">margin vertical 6rem</div>

You can editing sizes from: src/scss/_variables.scss
Editing spacing code from src/scss/bootstrap/utilities/_spacing.scss