Creating a triangular shape beneath a div in Bootstrap: a step-by-step guide

I have 12 column in my HTML for a project. I'd like to add a triangle underneath any div, such as a photo.https://i.sstatic.net/RORnr.png

Here are sample HTML codes:

  <div class="container">
                                   <div class="row">
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#2EFE2E">A+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#58FA58">A</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F781">A-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F79F">B+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding sidiv"><div class="info-box"><span class="info-box-icon" >B</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#A9F5BC">B-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#D0FA58">C+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#F7FE2E">C</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE9A2E">C-</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE642E">D+</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE2E2E">D</span></div></div>
                                   <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FF0000;">D-</span></div></div>
                                </div>
                               </div>

How can I achieve this triangular effect using Bootstrap, CSS, jQuery, or other methods? Thanks for the help!

htmlcsstwitter-bootstrap-3

Answer №1

Utilize bootstrap glyphicons with the 

class="glyphicon glyphicon-triangle-top"
and position it below your div using CSS.

See a live example:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            .col-xs-1 {
              height: 15px;
            } 
           </style>
           </head>
           <body>
<div class="container">
<div class="row">
  <div class="col-xs-1" style="background-color: blue;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: brown;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: blue;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: green;"></div>
  <div class="col-xs-1" style="background-color: red;"></div>
  <div class="col-xs-1" style="background-color: brown;"></div>
   <span class="glyphicon glyphicon-triangle-top" style="color: black;"></span>
</div>
</div>
  </body>
  </html>

An added benefit of using span is its easy manipulation through JavaScript.

Answer №2

This is just a starting point, feel free to customize any styles such as color or positioning to suit your design.

HTML:

<div class="sidiv">B</div>

CSS:

.sidiv {
  position: relative;
  padding-left: 15px;
}

.sidiv:after {
    position: absolute;
    bottom: -20px;
    left: 0px;
    content: "";

    width: 0px; 
    height: 0px; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid red;
}

JSFiddle: https://jsfiddle.net/6t6kz4ws/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using multiple background images in CSS on mobile devices

I decided to experiment with creating a grid pattern using css background-images in this way: .grid { width:720px; height:720px; background-color: #333333; background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px), ...

ioscssbackground-image

Menu options

I am currently working on developing a mouseover navigation website. Initially, my design included main buttons for "Our Team", Locations, and Patient Resources. Here is the basic structure I had before attempting to switch to a mouseover approach... &l ...

javascripthtmlcssdrop-down-menunavigation

Leveraging CSS in React/JSX

I am struggling to understand how to implement CSS with React. I have tried using inline styles but couldn't get it to work. Additionally, I am unsure where to apply CSS in my JSX code within the react class. For example, in one of my react classes, ...

javascripthtmlcssreactjs

Styling radio buttons with CSS

I've been struggling to align my radio buttons next to their labels. Despite numerous changes to the CSS, I can't seem to get my text boxes, radio buttons, and comment box to line up properly. Specifically, the second radio button is causing alig ...

htmlcss

Center text vertically within a Bootstrap grid system

I've searched far and wide on Google, Stack Overflow, and other sources for solutions to vertically align text within my code, but I'm struggling to make it work. My code features a form where users can input a 'doom name' and the text ...

htmlcsstwitter-bootstrap

Modifying one input can impact other input elements without any form of direct connection between them

Below is the HTML code snippet: <tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> <input type="checkbox" name="row-{{i}}-{{j}}" [ ...

javascripthtmlangularangular2-directives

generating dynamically evolving controls within the MVC framework

I am looking to dynamically create controls in a view based on the source. For example, if the type is a text box, I want to generate a text box; if it is a check box, I want to create a check box dynamically in MVC. Below is the snippet of my current code ...

htmlasp.net-mvc-4razorgeneratorrazor-declarative-helpers

Angular Material floating labels vanishing or being truncated when hovered over

The behavior of floating labels seems to be causing issues for me. When I hover over them, the label either disappears completely, gets cut off at the bottom, or at times even at the top. I've tried adjusting z-index and overflow visibility within the ...

cssangularangular-material

Is there a way to display all of them inline in Woocommerce?

Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...

javascriptphphtmlcsswoocommerce

Assigning data attributes to jQuery objects using the script type of "text/template"

I have inserted the following snippet in my HTML file: <script id="tpl" type="text/template"> <div data-id="" class="line"> ... </div> </script> Within my JavaScript code, I am trying to retrieve this template, add it to t ...

javascriptjqueryhtml

Is it possible to send POST data to a top-level iframe using Javascript or jQuery when redirecting?

This inquiry is in reference to a question about sending POST data on redirect using Javascript/jQuery. The proposed solution involved creating a hidden form that would be submitted to manage the POST and redirect process. However, I am planning to generat ...

javascriptphpjqueryhtmliframe

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

htmlcss

How can I execute a Python script on an HTML webpage by clicking a button?

Below is the HTML code I have written: <script> function goPython(){ $.ajax({ url: "MYSCRIPT.py", context: document.body }).done(function() { alert('finished python script');; ...

javascriptpythonhtmlajaxcgi

The process of displaying video information on web browsers by streaming platforms

https://i.sstatic.net/XgnsX.png I recently noticed a feature in Chrome where there is a tab next to the extensions that shows videos playing in the browser. This tab only appears when a song or video is being played. For example, when I start a video on Y ...

htmljqueryvideonav

React Native ellipsizeMode - Using two Text elements side by side

I am trying to achieve a layout similar to the following scenarios: Case 1: If the text is longer than the screen width +--------------------------------------+ | very long teeeeeeeeeeeeeeeee.. (1234)| +--------------------------------------+ Case 2: If ...

androidcssreactjsreact-nativeflexbox

Identify when a user exits the webpage

Important! Please review this question before marking it as a duplicate I am looking for a solution that will automatically redirect a visitor to another page when they leave my webpage. The goal is to keep the page open and engage the user even if they s ...

javascriptjqueryhtml

Expand the width of the div by a specified amount with each click

Greetings Everyone! I've scoured the internet high and low in search of a solution, but I have yet to come across exactly what I need. The Issue at Hand My goal is to expand the width of my Div every time I click on my Button. All I have is my DIV ...

javascripthtmlcss

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

Adjust the image size to fit the page according to its height

Having a dilemma here. I have this square image (2048x2048) that I want to set as a background. The tricky part is, I want it to display borders when the page stretches into widescreen mode, but also resize while maintaining its square shape when the page ...

htmlcssimageresize

CSS - apply unique styles to specific nodes based on the class they share

Struggling to apply different styles to the same class when it appears for the second time in the markup using the Subsequent-sibling combinator "~". It seems like there may be a detail I'm missing with the use of "~". Unfortunately, the HTML cannot b ...

htmlcss