<div class="container">

  <h2>Closing cross</h2>

  <div class="my-dialog">
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h3>My dialog</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit, nostrum voluptate. Consequuntur hic excepturi inventore deleniti odio minus dolore ex voluptate ipsam odit id optio ipsa ducimus, quibusdam perspiciatis!</p>
  </div>

  <hr />

  <h2>Caret</h2>

  <p>
    <span class="caret"></span>
  </p>  
  
</div>
.my-dialog {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  backgorund: #eee;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.