jquery - Multiple elements inline with full width button that collapses (Bootstrap) -
i'm creating responsive calendar shows info on "well" when click on name (collapsable).
and want button full-width along date , icon on same line, when i'm using bootstrap grid keeps making in blocks.
what can wrap on same line , make collapsable "well" appear below?
this example of 1 event:
<!--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 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>
and here fiddle of calendar: http://jsfiddle.net/mrndrmrj/6/
thank in advance!!
add in css width: 65%
in btn-block
, remove margin-top: -19px
in btn-event
Comments
Post a Comment