blenzcoffee
blenzcoffee

Reputation: 891

non-responsive grid bootstrap

Is there a way to make a non-responsive grid bootstrap only for certain div? I know there's a way to disable responsiveness by following this step here. But what I want is I only want the non-responsive columnn for my div.

Basically I have 3 buttons, and I want to align it using cols and I want it always fixed in 3 horizontal columns. Currently with the following code the cols will change its position responsively when the window is resized. What is the proper way of doing this other than specifying class="col-sm-4 col-md-4 col-xs-4 for each class? I tried class="col-4"but it doesn't work. Thank you!

<div class="overlayOptions" ng-show=overlayOptions>
                <div class="row">
                    <div class="col-md-4"><a class="watchButton"><span class="glyphicon glyphicon-plus"></span></a></div>
                    <div class="col-md-4"><a class="inventoryButton"><span class="glyphicon glyphicon-minus"></span></a></div>
                    <div class="col-md-4"><a class="storeButton"><span class="glyphicon glyphicon-pencil"></span></a></div>
                </div>
            </div>

Upvotes: 1

Views: 2498

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

Just specify only the smallest width column, i.e. the col-xs for your divs:

<div class="overlayOptions" ng-show=overlayOptions>
            <div class="row">
                <div class="col-xs-4"><a class="watchButton"><span class="glyphicon glyphicon-plus"></span></a></div>
                <div class="col-xs-4"><a class="inventoryButton"><span class="glyphicon glyphicon-minus"></span></a></div>
                <div class="col-xs-4"><a class="storeButton"><span class="glyphicon glyphicon-pencil"></span></a></div>
            </div>
        </div>

Upvotes: 3

Related Questions