How to create a badge using Bootstrap framework

What Will I Learn?

You will learn The classes for badge in bootstrap
You will learn How to create bagde in some element such as text, button
You will learn Example C

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScript

Difficulty

Basic

Tutorial Contents

Badges are numerical indicators of how many items are associated with a link, To create a badge using bootstrap you just need to add .badge class. For more the detait tutorial, follow the steps bellow :

Create a new html file.
As usual, for using bootstrap we need use html5 doctype and host the bootstrap file or add Bootstrap CDN. In this tutorial i choose to add bootstrap CDN. Here the full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Badge</title>
</head>
<body>
    modify the code here . . . . . 
</body>
</html>

Before add any element with bootstrap recommended to wrap the page fist, you can use .container or .container-fluid class.

    <div class="container">
    </div>

Create some link text using <a> element. add the code bellow in <div class="container"> element.

 <a href="#">@sogata</a><br>
<a href="#">@utopian-io</a><br>
<a href="#">@espoem</span></a>

Adding the badge, to add the badge we can Use the .badge class within <span> elements . for ex :

<span class="badge">55</span>

Then add this element after text, so it becomes like this.

<a href="#">@sogata   <span class="badge">55</span></a>
<a href="#">@utopian-io   <span class="badge">64</span></a>
<a href="#">@espoem    <span class="badge">59</span></a>

Try to run on your browser

to add the badge on the button you can do with same steps also. fist crate the some button in the same html file.

<button type="button" class="btn btn-primary">@sogata </button>
 <button type="button" class="btn btn-success">@utopian-io </button>    
 <button type="button" class="btn btn-danger">@espoem </button>

Then add the badge with span element after the text in button. like this :

        <button type="button" class="btn btn-primary">@sogata <span class="badge">55</span></button>
        <button type="button" class="btn btn-success">@utopian-io <span class="badge">64</span></button>    
        <button type="button" class="btn btn-danger">@espoem <span class="badge">59</span></button>

LIVE DEMO HERE

Copy the full code bellow :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Badge</title>
</head>
<body>
    <div class="container">
        <br>
        <a href="#">@sogata   <span class="badge">55</span></a>
        <a href="#">@utopian-io   <span class="badge">64</span></a>
        <a href="#">@espoem    <span class="badge">59</span></a>
        <br><br>
        <button type="button" class="btn btn-primary">@sogata <span class="badge">55</span></button>
        <button type="button" class="btn btn-success">@utopian-io <span class="badge">64</span></button>    
        <button type="button" class="btn btn-danger">@espoem <span class="badge">59</span></button>
    </div>
</body>
</html>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort:

Trending

[-]

zikril04 (45) 7 years ago

bereh din. kwkwkwk @sogata