---
title: "Different types of shapes classes in Bootstrap"  
description: "Different types of shapes classes in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2023-11-28  
canonical: https://www.mindstick.com/forum/156601/different-types-of-shapes-classes-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Different types of shapes classes in Bootstrap

Mention the different types of shape classes that can change the [shape of an element](https://answers.mindstick.com/qa/93854/state-the-different-types-of-shapes-classes-which-can-change-the-shape-of-an-element).

## Replies

### Reply by Aryan Kumar

Bootstrap primarily focuses on building responsive and mobile-first web pages by providing a grid system and a set of components. While Bootstrap itself does not have specific classes for drawing shapes, you can use various HTML and CSS techniques to create different shapes within a Bootstrap-based layout.

Here are examples of creating different shapes using HTML and CSS within a Bootstrap environment:

### 1. Circle:

```plaintext
<div class="rounded-circle bg-primary" style="width: 100px; height: 100px;"></div>
```

### 2. Square:

```plaintext
<div class="bg-secondary" style="width: 100px; height: 100px;"></div>
```

### 3. Triangle:

```plaintext
<div class="triangle-up"></div>

<style>
  .triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid green;
  }
</style>
```

### 4. Pentagon:

```plaintext
<div class="pentagon"></div>

<style>
  .pentagon {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
  }

  .pentagon:before {
    content: "";
    width: 0;
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -25px;
    border-width: 0 25px 30px;
    border-style: solid;
    border-color: transparent transparent purple transparent;
  }
</style>
```

### 5. Heart:

```plaintext
<svg class="bi bi-heart-fill" width="100" height="100" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 14s1.5-2 4-4C14 6 12 4 8 4 6 4 4 6 4 6c-3.5 4-1.5 8 4 10z"/>
</svg>
```

These are just basic examples, and you can customize the size, color, and other properties based on your specific needs. The use of shapes in web development often involves a combination of HTML and CSS, and sometimes SVG (Scalable Vector Graphics) for more complex shapes. Always make sure to consider accessibility and responsiveness when working with shapes on the web.


---

Original Source: https://www.mindstick.com/forum/156601/different-types-of-shapes-classes-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.