Bootstrap 3 Implementation playground

Component with accessories

Dismissible alert component is an container with a close button on top right hand corner.

Let's see it's style, and understand how and why it is implemented in this way.

I am a dismissible alert component. 
  .alert-dismissible {
    padding-right: 35px;
  }
  .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
  }
  .close {
    float: right;
  }

Let's start

A container with basic padding and close button

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9

We need to fix the close button top right hand corner

We can use position: absolute; with top and right.

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 
  .close {
    position: absolute;
    top: 0;
    right: 0;
  }

The close button is outside the alert component. Adding position: relative; to .alert can solve the problem. You can refer to the Component with header and footer part for more detail.

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 
  .close {
    position: absolute;
    top: 0;
    right: 0;
  }
  .alert {
    position: relative;
  }

It works, and it is one of the solution, but it is not the best when we need some padding on close button. We need to hardcode the padding to top and right.

Bootstrap 3 implement another solution. It use float: right;

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 
  .close {
    float: right;
  }

But the close button affect the position content inside. So Bootstrap 3 add extra padding to the container and use position to

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 
  .alert {
    padding-right: 35px;
  }
  .close {
    float: right;
    position: relative;
    right: -22px
  }

I like this implementation, as the close button is part of the component. The style merge the button into the component. Although we have -22px, but it is not parameter of .alert. It is related to size of close button.

One of the limitation is, the button must be the first child element of .alert. Otherwise, it will become:

I am some content: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9

It is because the position depends on the default position.

Sum Up

  1. We can move the accessory element into padding of the component container.
  2. Use position: relative; in component container. It can prevent the children element go outside the component with position: absolute;