ADVERTISEMENT

15+ Bootstrap Ribbon Corner With Html and Css (Source Code)

Telegram Group Join Now

ADVERTISEMENT

15+ Bootstrap Ribbon Corner With Html and Css

Bootstrap Ribbon Corner With Html and Css
Bootstrap Ribbon Corner With Html and Css

 

ADVERTISEMENT

ADVERTISEMENT

Learners, let me tell you about what ribbon is in the sense of developer, and where we use it.

So learners you must have observed that in a variety of websites that there some highlighted text gets flowed over the page within a border area. This is what is for our ribbon in web development.

ADVERTISEMENT

So ribbon is a decoration part in css that help us to design the elements that we want. Like on the festival of Diwali, we gift someone that is covered with a ribbon over the box. That decorates our box.

ADVERTISEMENT

For your quick recap or in short words ribbon is used over the elements, it is beyond your creative imagination, how you are managing

Bootstrap Ribbon Corner With Html and Css
Bootstrap Ribbon Corner With Html and Css

 

Hey learners..!
Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design the Bootstrap Ribbon With Corner.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

I’m using bootstrap for your ease which will help you to quickly design the Css parts and it will be adjustable as well.

Without any further ado, let’s get it into.

ADVERTISEMENT

Bootstrap Code For Ribbon Corner

In this section, we will use the bootstrap CDN link so that we will be able to access the properties. Then we will add text in the I heading as a bootstrap ribbon.

ADVERTISEMENT

So for your information, I would like to like to give a piece of information that in bootstrap width of the screen is divided into 12 equal parts.

So in the next row after the heading, we have div I have allotted 6 columns to it. Again we will divide the rest of the rows into 3 and 2 columns.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">  
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  
 <!------ Include the above in your HEAD tag ---------->  

<div class="container">

<div class="row">
<h2>Bootstrap Ribbon Buttons</h2>
</div>
<div class="row">
<div class="col-md-6"> <!-- Standard button -->
<button type="button" class="btn btn-default ribbon">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary ribbon">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success ribbon">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info ribbon">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning ribbon">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger ribbon">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
</div>
<div class="col-md-3 "> <!-- Standard button -->
<button type="button" class="btn btn-default ribbon">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary ribbon">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success ribbon">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info ribbon">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning ribbon">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger ribbon">新產品</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
</div>
<div class="col-md-2 pull-right"> <!-- Standard button -->
<button type="button" class="btn btn-default ribbon">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary ribbon">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success ribbon">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info ribbon">info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning ribbon">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger ribbon">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
</div>
</div>
</div>

CSS Code For Ribbon Corner

By css section, we will design all div as per width and it will be responsive as well that is what needs to be focused on by the design part.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

And by before and after selector we will also add a triangular-like structure after every div. The Below code will analyze you more. So add in your HTML half-complete file and wait to watch some magic.

ADVERTISEMENT

/*Remove that CSS*/
.col-MD-3 {
margin-left:5%;
}
/*Remove that CSS*/
button {
margin: 20px 0;
line-height: 34px;
position: relative;
cursor: pointer;
user-select: none;
outline:none ! important;
width:100%;
}
button:active {
outline:none;
}
button.ribbon {
outline:none;
outline-color: transparent;
}
button.ribbon:before, button.ribbon:after {
top: 5px;
z-index: -10;
}
button.ribbon:before {
border-color: #53dab6 #53dab6 #53dab6 transparent;
left: -25px;
border-width: 17px;
}
button.ribbon:after {
border-color: #53dab6 transparent #53dab6 #53dab6;
right: -25px;
border-width: 17px;
}
button:before, button:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 0;
outline:none;
}
button.btn-default:before {
border-color: #757575 #757575 #757575 transparent;
}
button.btn-default:after {
border-color: #757575 transparent #757575 #757575;
}
button.btn-primary:before {
border-color: #2e6da4 #2e6da4 #2e6da4 transparent;
}
button.btn-primary:after {
border-color: #2e6da4 transparent #2e6da4 #2e6da4;
}
button.btn-success:before {
border-color: #398439 #398439 #398439 transparent;
}
button.btn-success:after {
border-color: #398439 transparent #398439 #398439;
}
button.btn-info:before {
border-color: #269abc #269abc #269abc transparent;
}
button.btn-info:after {
border-color: #269abc transparent #269abc #269abc;
}
button.btn-warning:before {
border-color: #d58512 #d58512 #d58512 transparent;
}
button.btn-warning:after {
border-color: #d58512 transparent #d58512 #d58512;
}
button.btn-danger:before {
border-color: #ac2925 #ac2925 #ac2925 transparent;
}
button.btn-danger:after {
border-color: #ac2925 transparent #ac2925 #ac2925;
}

If you want a live preview of the project that you have designed till now. Have a look below

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

Bootstrap Ribbon Corner With Html and Css

By this blog… We have learned how we can design Bootstrap Ribbon.
Now I’m looking for your reviews. So, How was the blog, Learners?

If you want a more crisp blog like this, please check our Blogs sites, CodewithRandom. keep tuned with us because every day you will learn something new here.

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram

Written by @Ankit Kumar

Code by  @jye6016

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT