How to Place a Badge in Lower Right Corner of a "Media" in Bootstrap

How to place a badge in lower right corner of a media in bootstrap?

With such a markup :

<div class="media">
  <a class="pull-left" href="#">
      <img class="media-object" src="http://placehold.it/64x64" />
      <span class="badge badge-success pull-right">2</span>
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    My content
  </div>
</div>

You have your badge at the bottom right of the image, but under. If you want it to be a bit over the image, add this css :

.media img+span.badge {
    position: relative;
    top: -8px;
    left: 8px;
}

See this Fiddle : http://jsfiddle.net/d7kXX/

But obviously you can place it wherever you want. If you want it entierly over, try this :

http://jsfiddle.net/6cME7/

FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.

How to place buttons on the bottom corner of a page and have it be responsive?

I appreciate you're trying to use Flexbox, but in this case it's not the right tool for the job.

You should use either absolute or fixed positioning (depending on what you're going for) to get the social buttons in the bottom corner. Just make sure body has position:relative.

body { position:relative }
#socialMediaBottons { position:fixed; bottom:10px; right:10px; }
#fbButton, #twitterButton { display:inline-block; }

This way, whatever height or width the viewport is, the buttons will always be a specified distance from the bottom right corner (you can adjust bottom and right to your liking).

Placing an image to the top right corner - CSS

You can just do it like this:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon" alt="" />
    <div>some text...</div>
</div>

Lock bootstrap modal to bottom-right corner?

if you want to position it relative to the window, you want position:fixed; and if you want it to stay anchored right and bottom when the screen resizes left and top won't work, as you already noted so use right and bottom instead.

Bootstrap already styles this div like this:

@media (min-width: 768px)
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

so you'll need to override that with this:

.modal.in .modal-dialog {
    position:fixed;
    bottom:0px;
    right:0px;
    margin:0px;
}

http://codepen.io/ryantdecker/pen/ZOpQOX

How to place Social media icons on right side of navbar

try apply using these css property to your social icon

  ul.navbar-nav{
float:right;
}

ul.navbar-nav li{
    display: inline;
    list-style-type: none;
}

if still facing problem give a jsfiddle link to your question

CSS Positioning an icon at the top right side of the image

This example can take an image of any height.

1. Turn the <i class="delete"> into a <div>

2. Wrap the <img> with the new delete div

3. Give .image:before a min-height: 150px; and remove the fixed height on .image

4. Apply position: relative to .delete

5. Apply the delete button to a pseudo elment with .delete:after or place another <i> to make it interactive.

Have an example!

Example without the delete pseudo element

HTML

<div class="image"> 
    <div class="icon-remove blue delete">       
        <img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
        <!-- <i class="delete-button"></i> if you need to use a real element -->
    </div>  
</div>

CSS

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    min-height: 150px;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
}

.delete {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.delete:after {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}

/* If you need to use a real element remove .delete:after and use this  -- 
.delete .delete-button {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}*/

How to create a simple CSS badge system

Answering my own question for the benefit of others.

Recently I have created a badge system using css that can be applied to any html element.

I hope this helps anyone else that is looking for something like this.

This is done using css pseudo element being applied after the host element. A badge can be applied to any element by simply adding a badge attribute with a value.

Some host elements may need to add overrides if the badge's default position/style is not suitable.

The content of the pseudo element is inherited from the attribute badge.

If no value, a value of 0 or a negative value is given, the badge will not display by default. If you need to display badge with 0 or a negative value, use css override or remove the rules from your css file.

Example of an override;

.my-unusual-element[badge="0"]:after {
    display: initial;
}

This is a CSS only solution and is intended to be a light weight badge system.

I posted a fiddle here for demo.

[badge]:after {      background: red;    border-radius: 30px;    color: #fff;    content: attr(badge);    font-size: 11px;    margin-top: -10px;    min-width: 20px;    padding: 2px;    position: absolute;    text-align: center;}
[badge^="-"]:after,[badge="0"]:after,[badge=""]:after {   display: none;}

<span badge="">Empty string</span><br><br><span badge="-1">-1</span><br><br><span badge="0">0</span><br><br><span badge="1">1</span>

---

Related Topics