15+ Bootstrap Ribbon Corner With Html and Css
.png "How to design Bootstrap ribbon | Bootstrap 4 Corner Ribbon - Codewithandom")
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.
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.
For your quick recap or in short words 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 With Corner.
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.
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.
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
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.
/*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
50+ HTML, CSS & JavaScript Projects With Source Code
Bootstrap Ribbon Corner With Html and Css
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.
ADVERTISEMENT
You can follow me on Instagram
ADVERTISEMENT
Written by @Ankit Kumar
ADVERTISEMENT
Code by @jye6016
