CODEWITHSUNDEEP
csstwitter-bootstrap
Khrys
Khrys

Reputation: 2774

Using label, and button inside a grid

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">
                            <a href="#"  class="btn btn-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque</a>
                            <a href="" class="btn btn-warning">BUTTON</a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>Text 2</label>
                        <div class="btn-group btn-group-justified">
                            <a href="" class="btn btn-warning">BUTTON 2</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" href="#">Cancelar</a>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 117

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

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/

Upvotes: 1

Related Questions