Bootstrap button with divider

Bootstrap button with divider

by kakss

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
  
  on reference to stackoverflow : 
  https://stackoverflow.com/questions/12349979/bootstrap-button-with-divider
  
  explanation answer link : 
  https://stackoverflow.com/a/52715683/2147002
-->

<div class="container">
  <div class="row">
    <!-- example for left divider / logo at right -->
    <div class="col-md-12 text-center">
      <a href="#" class="btn btn-primary btn-lg btn-nopadding">
          <span class="btn-padding">BUTTON NAME</span>
          <span class="glyphicon glyphicon-plus btn-padding btn-divider-left"></span>
      </a>
    </div>
    <!-- example for right divider / logo at left -->
    <div class="col-md-12 text-center">
      <a href="#" class="btn btn-primary btn-lg btn-nopadding">
          <span class="glyphicon glyphicon-plus btn-padding btn-divider-right"></span>
          <span class="btn-padding">BUTTON NAME</span>
      </a>
    </div>
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

/* Button css start from here */

.btn-nopadding{
    padding: 0px;
    font-size: 24px; /* optional */
}
.btn-padding{

}

/* if you want divider to left / logo at right */
.btn-divider-left{
    border-left: 1px solid #1e4d76; /* set your color here */
}

/* if you want divider to right / logo at left */
.btn-divider-right{
    border-right: 1px solid #1e4d76; /* set your color here */
}