How to reduce the height and text padding of a bootstrap breadcrumb?

Question

I just want to know how to reduce the height and the vertical padding between the text and the box borders of a standard Bootstrap breadcrumb:

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> 

Original:

What I need: (reduce the tickness of the bar and the spacing between the text and the bar upper and lower borders. Ths font remains the same size)

Answer 1

Setting padding in .breadcrumb class by override the bootstrap css

 .breadcrumb { padding: 2px 15px !important; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> 

Answer 2

change the padding

CODE:

.breadcrumb {
    padding-top: 0px;
    padding-bottom: 0px;
 }

EXAMPLE: https://jsfiddle.net/a2v66hrh/

Answer 3

Add this to your custom CSS file for example:

.breadcrumb {
   padding: 4px 15px;
}

Bootstrap defines a top and bottom padding of 8pk. Just use any lower value than this.

Answer 4

Just add below css

.breadcrumb {
    padding:1px 15px !important;
 }