How to design Bootstrap ribbon | Bootstrap 4 Corner Ribbon – Codewithandom

How to design Bootstrap ribbon | Bootstrap 4 Corner Ribbon – Codewithandom


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

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

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

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

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.

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

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

HTML SECTION 

By this section, we will use the bootstrap CDN link so that we will be able to access the properties.

Then we will add a text I heading as bootstrap ribbon.

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 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.


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 SECTION 

 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.


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 just add in your HTML half complete file and wait to watch some magic.

 /*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 your project that you have designed till now 😀. Have look below👇

See the Pen Untitled by jye6016 (@jye6016) on CodePen.


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 then 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

Leave a Reply