Using label, and button inside a grid - css

Question

In the first column, is it possible to have a label instead a button? Visually I want the same as a label or a button, but I don't wanna it to be clickable. The text is getting out too. And I was trying to make the button smaller but it isn't accepting width.
FIDDLE
<div>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>AA</span></h4>
</div>
<div class="modal-body">
<form role="form" class="container-fluid">
<div class="form-group col-md-6">
<label>Text</label>
<div class="btn-group btn-group-justified">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque
BUTTON
</div>
</div>
<div class="col-md-6">
<label>Text 2</label>
<div class="btn-group btn-group-justified">
BUTTON 2
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="#">Cancelar</a>
</div>
</div>
</div>
</div>

Answer 1

Visually I want the same as a label or a button, but I don't wanna it
to be clickable.
The best way would be to add the disabled attribute on the element. Then cancel out the reduced opacity using your own class
HTML
<a href="#" class="btn btn-warning myClass btn-sm" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque</a>
CSS
.myClass[disabled] {
opacity: 1;
}
The text is getting out too.
Just add this to the above CSS ruleset
white-space: normal;
And I was trying to make the button smaller but it isn't accepting
width.
The display for btn in the btn-group-justified class is table-cell and the width is set to 1% for all columns. So you have to set your width keeping in mind that 1% is the default.
For example the following makes it 25% for a 2 column button group
width: 0.5%;
The complete CSS would be
.myClass[disabled] {
opacity: 1;
white-space: normal;
width: 0.5%;
}
Fiddle - http://jsfiddle.net/wr78t8ug/