I am trying to format a news-feed item and want to include a glyphicon to illustrate the type of news item and then a user defined text field next to it. I would like to have the text formatted such that it is indented about four spaces from the glyphicon (Second news feed item in the JSFiddle where I hardcoded it in a non-reproducible way).
I made a layout where the glyphicon was in a col-xs-1 and the rest of the screen was for the text and then zeroed out all the padding but it still too far to the right for what I would like (Third news feed item in the JSFiddle).
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<h3><span class="glyphicon glyphicon-earphone"></span>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider-yellow"></div>
<div class="col-xs-12 news-feed-item-container">
<h3 style="white-space:pre"><span class="glyphicon glyphicon-earphone"></span> New conversation with Brett Harrsion from Firm XYZ shows there<br> is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at Firm XYZ that lead us to believe we will be able to sell product A to them sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider"></div>
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<div class="col-xs-1" style="padding-right:0">
<h3><span class="glyphicon glyphicon-earphone"></span></h3></div>
<div class="col-xs-11" style="padding-left:0">
<h3>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3></div>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
JSFiddle: https://jsfiddle.net/schins02/r0p83uaq/
Image of feed items with styles applied => https://i.sstatic.net/4gqCN.jpg
This seems a bit picky so thanks for any help provided!
Given your needs, I would not recommend relying on .col-*-* for your positioning. Your needs are simply below what Bootstrap's Grid framework is designed for.
Instead, I would rely on wrappers with .pull-left and .pull-right to position your icon and content. I've created an example here:
http://www.bootply.com/LwfLZZ2exY
Note: My example makes use of calc() because I wasn't sure how responsive your design approach needed. You may need to adjust this (and of course any other element) to best-suit your intentions.
