Responsive bootstrap panel header with buttons? - html

Question

I need some advice to make bootstrap panel header responsive. Panel has title with several buttons on the right side. It looks fine in large screen but looks ugly when browser size is small.
My full code here jsfiddle.
.panel {
margin: 15px;
}
.panel-title {
padding-top: 7px;
font-size: 20px;
}
.mr-10 {
margin-right: 10px;
}
<div class="panel panel-success panel-br-4">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<i class="fa fa-file-text" aria-hidden="true"></i> <span>Documents</span>
</h4>
<a id="document-сreate-btn" class="btn btn-success pull-right">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
<a class="btn btn-warning pull-right mr-10">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
<a class="btn btn-warning pull-right mr-10">
<span>Save new order</span>
</a>
</div>
<div class="panel-body">Some content</div>
</div>
When all items cannot fit in one line, I want to make header as in the next picture:
Is such things makes by flexbox or bootstrap grid system? Whats the better way? I will appreciate any examples! :)

Answer 1

This is just a quick example of how to use Bootstrap grid system. It's not gonna be as perfect as you want but it will give you an introduction to grid systems. Also, don't forget to read about media queries.
<div class="panel panel-success panel-br-4">
<div class="panel-heading">
<div class="row">
<div class="col-sm-6">
<h4 class="panel-title">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>Documents</span>
</h4>
</div>
<div class="col-sm-3" style="display: flex">
<a class="btn btn-warning mr-10">
<span>Save new order</span>
</a>
<a class="btn btn-warning">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
</div>
<div class="col-sm-3">
<a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
</div>
</div>
</div>
<div class="panel-body">Some content</div>