Different types of shapes classes in Bootstrap

Question

Aryan Kumar · Answer

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:
andlt;div class="rounded-circle bg-primary" style="width: 100px; height: 100px;">andlt;/div>
2. Square:
andlt;div class="bg-secondary" style="width: 100px; height: 100px;">andlt;/div>
3. Triangle:
andlt;div class="triangle-up">andlt;/div>
andlt;style>
  .triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid green;
  }
andlt;/style>
4. Pentagon:
andlt;div class="pentagon">andlt;/div>
andlt;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;
  }
andlt;/style>
5. Heart:
andlt;svg class="bi bi-heart-fill" width="100" height="100" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg">
  andlt;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"/>
andlt;/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.

forum

Different types of shapes classes in Bootstrap

Ethan Karla

Can you answer this question?

1 Answers

1. Circle:

2. Square:

3. Triangle:

4. Pentagon:

5. Heart:

Liked By