I am currently in the process of developing a responsive calendar that will display additional information in an expandable "well" when the user clicks on a specific event.
My goal is to have the button, date, and icon all appear on the same line at full width. However, I am encountering issues with Bootstrap grid displaying them as separate blocks.
Is there a way for me to ensure that everything appears on the same line while also having the collapsible "well" show up below?
Below is an example of how one event is structured:
<!--Event 1-->
<div class="row">
<div class="div-event">
<span class="date-event col-xs-2 col-sm-2"><span class="num-date-event">22</span> <br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-sm-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Katy's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-sm-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="collapse" id="collapse-1">
<div class="well">
...
</div>
</div>
</div>
</div>
If you would like to view the calendar in action, please visit this fiddle: http://jsfiddle.net/mrndrmrj/6/
Thank you for your assistance!