Blocks is mix of several different components. We can combine image block component with text elements such as heading and paragraph. With flexbox controller and sizing, you can create final blocks. Below you will see how we combine these features to create our blocks from website demos. Of course, you can change the direction, size, border styles very easily. For that I really recommend you to read bootstrap flex and spacing articles.
Blockquote
Classic blockquote
<figure class="blockquote border p-3 rounded">
<blockquote class="p-3 rounded">
<p class="p-1">Lorem ipsum dolor sit amet consectetur. Suspendisse dignissim ultrices aenean arcu in non quisque. Maecenas dapibus ipsum nibh in elit nisl donec.</p>
<figcaption class="p-1">
<h5 class="mb-1">Ebony Phan</h5>
<p class="small">Senior Web Developer</p>
</figcaption>
</blockquote>
</figure>Blockquote with author avatar
<figure class="blockquote border p-3 rounded">
<blockquote class="p-3 rounded d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center gap-4">
<div class="p-3 rounded-circle">
<img src="https://via.placeholder.com/200x200" class="rounded-circle image-cover" width="100" height="100" alt="">
</div>
<div>
<p class="p-1">Lorem ipsum dolor sit amet consectetur. Suspendisse dignissim ultrices aenean arcu in non quisque. Maecenas dapibus ipsum nibh in elit nisl donec.</p>
<figcaption class="p-1">
<h5 class="mb-1">Ebony Phan</h5>
<p class="small">Senior Web Developer</p>
</figcaption>
</div>
</blockquote>
</figure>Testimonails
Image left alignment example
<div class="border p-3 testimonial">
<div class="p-3 d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center gap-4">
<div class="p-3 rounded">
<img src="https://via.placeholder.com/200x200" class="rounded image-cover" width="100" height="100" alt="">
</div>
<div class="d-flex flex-column gap-1 ">
<div>
<h5 class="mb-0">Ebony Phan</h5>
<p class="small mb-1">Senior Web Developer</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur. Suspendisse dignissim ultrices aenean arcu in non quisque. Maecenas dapibus ipsum nibh in elit nisl donec.</p>
</div>
</div>
</div>Right alignment
<div class="border p-3 testimonial">
<div class="p-3 d-flex flex-column flex-lg-row align-items-end align-items-lg-center justify-content-center gap-4">
<div class="p-3 rounded order-1 order-lg-2">
<img src="https://via.placeholder.com/200x200" class="rounded image-cover" width="100" height="100" alt="">
</div>
<div class="d-flex flex-column gap-1 order-2 order-lg-1 text-end">
<div>
<h5 class="mb-0">Ebony Phan</h5>
<p class="small mb-1">Senior Web Developer</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur. Suspendisse dignissim ultrices aenean arcu in non quisque. Maecenas dapibus ipsum nibh in elit nisl donec.</p>
</div>
</div>
</div>Center alignment
<div class="border p-3 testimonial">
<div class="p-3 d-flex flex-column align-items-center justify-content-center gap-4">
<div class="p-3 rounded">
<img src="https://via.placeholder.com/200x200" class="rounded image-cover" width="100" height="100" alt="">
</div>
<div class="d-flex flex-column gap-1 text-center">
<div>
<h5 class="mb-0">Ebony Phan</h5>
<p class="small mb-1">Senior Web Developer</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur. Suspendisse dignissim ultrices aenean arcu in non quisque. Maecenas dapibus ipsum nibh in elit nisl donec.</p>
</div>
</div>
</div>Featured box
In our demos, you will only find boxes that use left alignment in services section. But with bootstrap, they can easily be moved to the center or right. See all examples below.
Left alignment
<div class="featured-box featured-box-with-icon featured-box_hover rounded">
<div class="featured-box-inside border rounded p-2 d-flex flex-column align-items-start justify-content-start py-4 px-5 gap-3" data-tilt data-tilt-glare="false" data-tilt-max-glare="0.5" data-tilt-speed="1200" data-tilt-scale="1.04" data-tilt-max="5">
<div class="featured-box-icon rounded-circle p-2">
<i class="fa-solid fa-server fs-4"></i>
</div>
<div class="featured-box-content">
<h3 class="mb-1 h4 featured-box-title">Development</h3>
<p class="m-0 text-secondary">Lorem ipsum dolor sit amet consectetur. Nec dolor gravida sit nunc posuere a. Sed amet eu cursus eget sit diam sit varius velit.</p>
</div>
</div>
</div>Center Alignment
<div class="featured-box featured-box-with-icon featured-box_hover rounded">
<div class="featured-box-inside border rounded p-2 d-flex flex-column align-items-center justify-content-start py-4 px-5 gap-3" data-tilt data-tilt-glare="false" data-tilt-max-glare="0.5" data-tilt-speed="1200" data-tilt-scale="1.04" data-tilt-max="5">
<div class="featured-box-icon rounded-circle p-2">
<i class="fa-solid fa-server fs-4"></i>
</div>
<div class="featured-box-content text-center">
<h3 class="mb-1 h4 featured-box-title">Development</h3>
<p class="m-0 text-secondary">Lorem ipsum dolor sit amet consectetur. Nec dolor gravida sit nunc posuere a. Sed amet eu cursus eget sit diam sit varius velit.</p>
</div>
</div>
</div>Right alignment
<div class="featured-box featured-box-with-icon featured-box_hover rounded">
<div class="featured-box-inside border rounded p-2 d-flex flex-column align-items-end justify-content-start py-4 px-5 gap-3" data-tilt data-tilt-glare="false" data-tilt-max-glare="0.5" data-tilt-speed="1200" data-tilt-scale="1.04" data-tilt-max="5">
<div class="featured-box-icon rounded-circle p-2">
<i class="fa-solid fa-server fs-4"></i>
</div>
<div class="featured-box-content text-end">
<h3 class="mb-1 h4 featured-box-title">Development</h3>
<p class="m-0 text-secondary">Lorem ipsum dolor sit amet consectetur. Nec dolor gravida sit nunc posuere a. Sed amet eu cursus eget sit diam sit varius velit.</p>
</div>
</div>
</div>For hover effects we have featured-box_hover and featured-box_hover2 variants.
Dynamic Block or Portfolio Item
In this block we are using another hover system with some details, such us title, subtitle, and icons. These blocks use a bootstrap grid system. See the example below.
<!--Portfolio Single START-->
<div class="col-lg-4 col-md-6 col-12 portfolio-item graphic_design" data-category="graphic_design">
<div class="portfolio-block rounded block_hover_info w-100">
<img src="https://via.placeholder.com/1200x800" class="rounded w-100 image-cover" height="300" alt="">
<div class="block_hover_details p-3 ">
<a href="portfolio/portfolio1.html" title="Graphic Design" data-link="link" class="block_hover_inside rounded d-flex flex-column align-items-center justify-content-center text-reset text-decoration-none daniel_popup_link">
<!--Portfolio Single Hover START-->
<div class="block_hover-inside_content text-center ">
<h2 class="h4 bhi-primary">Graphic Design</h2>
<p class="bhi-secondary">Lorem ipsum dolor sit amet.</p>
<div class="btn btn-outline-light btn-icon btn-circle bhi-button text-white border-white">
<i class="fa-solid fa-link"></i>
</div>
</div>
<!--Portfolio Single Hover END-->
</a>
</div>
</div>
</div>
<!--Portfolio Single END-->In this case, we use link utility to show the bootstrap modal with different variant of content.