Bootstrap: Column White Space Text Fill - html

Question

I am using uib-accordions to display some data. I have defined accordion header as a row and split it into various columns to display various data elements.
Accordion View in Small and larger screens |
Accodion View in XS scren
Column distribution:
Store ID (col-xs-12 col-sm-5)
Controls (col-xs-12 col-sm-5): [SFS (Col-xs-4), BOPIS(col-xs-4), BOSTS(col-xs-4)]
Arrow Icon (col-xs-2 col-sm-1)
Now in small view all the glyphicon icon elements split into next row. I am trying to get display these icons in the same row as their labels, and there seems to be empty space available.
Secondly, how do we align phone, address and various toggle switch properly into a grid ? I have tried various options to center the toggle switches and save button, but it always breaks the view.
Here is the code:
<div class="container">
<div class="col-xs-12">
<hr>
<h4> Search: </h4>
<hr>
</div>
<div class="mycontainer row row-content" ng-controller="MainController" style="padding-top:100px" ng-cloak>
<uib-accordion close-others="true" ng-controller="ItemController" >
<div uib-accordion-group is-open="isopen" ng-repeat="item in items">
<uib-accordion-heading>
<div class="row" style="padding-top:3px">
<div class="col-xs-12 col-sm-5 ">
Store ID #: {{item.storeid}} | {{item.desc}}
</div>
<div class="col-xs-10 col-sm-6">
<div class="row">
**<div class="col-xs-4">SFS <span ng-if="item.SFS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.SFS" class="glyphicon glyphicon-remove-circle"></span> </div>
<div class="col-xs-4">BOPIS <span ng-if="item.BOPIS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOPIS" class="glyphicon glyphicon-remove-circle"></span></div>
<div class="col-xs-4">BOSTS <span ng-if="item.BOSTS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOSTS" class="glyphicon glyphicon-remove-circle"></span></div>
</div>**
</div>
<div class="col-xs-2 col-sm-1 ">
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
</div>
</div>
</uib-accordion-heading>
<div class="row">
<div class="col-xs-12 col-sm-4">
<a ng-href="tel:{{item.phone}}">
<span class="glyphicon glyphicon-earphone "></span> Phone: {{item.phone}}<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-map-marker"></span> Address: {{item.address}}<br>
</a>
</div>
<div class="col-xs-12 col-sm-8 ">
<div class="col-xs-12 col-sm-4">
SFS:
<toggle ng-model="item.SFS" aria-label="SFS Switch"></toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOPIS:
<toggle ng-model="item.BOPIS" aria-label="SFS Switch"></toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOSTS:
<toggle ng-model="item.BOSTS" aria-label="SFS Switch"></toggle>
</div>
</div>
<div class="col-xs-12">
<button class="btn btn-primary .btn-sm">Save</button>
</div>
</div>
</div>
</uib-accordion>
</div>
</div>

Answer 1

Bootply: https://www.bootply.com/rFa5pgA0rv
CSS:
.nowrap{
white-space: nowrap;
}
#media screen and (max-width:768px) {
.pull-right-xs{float:right;}
}
Kind of HTML
<div class="container">
<div class="col-xs-12">
<hr>
<h4> Search: </h4>
<hr>
</div>
<div class="mycontainer row row-content" ng-controller="MainController" style="padding-top:100px" ng-cloak>
<uib-accordion close-others="true" ng-controller="ItemController" >
<div uib-accordion-group is-open="isopen" ng-repeat="item in items">
<uib-accordion-heading>
<div class="row" style="padding-top:3px">
<div class="col-xs-12 col-sm-5 ">
Store ID #: {{item.storeid}} | {{item.desc}}
</div>
<div class="col-xs-10 col-sm-6">
<div class="row">
**<div class="col-xs-4 nowrap">SFS <span ng-if="item.SFS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.SFS" class="glyphicon glyphicon-remove-circle"></span> </div>
<div class="col-xs-4 nowrap">BOPIS <span ng-if="item.BOPIS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOPIS" class="glyphicon glyphicon-remove-circle"></span></div>
<div class="col-xs-4 nowrap">BOSTS <span ng-if="item.BOSTS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOSTS" class="glyphicon glyphicon-remove-circle"></span></div>
</div>**
</div>
<div class="col-xs-2 col-sm-1 ">
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
</div>
</div>
</uib-accordion-heading>
<div class="row">
<div class="col-xs-12 col-sm-4">
<a ng-href="tel:{{item.phone}}">
<span class="glyphicon glyphicon-earphone "></span> Phone: {{item.phone}}<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-map-marker"></span> Address: {{item.address}}<br>
</a>
</div>
<div class="col-xs-6 col-sm-8 ">
<div class="col-xs-12 col-sm-4">
SFS:
<toggle class="pull-right-xs" ng-model="item.SFS" aria-label="SFS Switch">toggle</toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOPIS:
<toggle class="pull-right-xs" ng-model="item.BOPIS" aria-label="SFS Switch">toggle</toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOSTS:
<toggle class="pull-right-xs" ng-model="item.BOSTS" aria-label="SFS Switch">toggle</toggle>
</div>
</div>
<div class="col-xs-12">
<button class="btn btn-primary .btn-sm">Save</button>
</div>
</div>
</div>
</uib-accordion>
</div>
</div>