twitter-bootstrap-3 – Page 2

Can I have two columns inside a Bootstrap Panel?

December 25, 2023 by Tarik

Sure.. just like you’d create any Bootstrap columns: <div class=”panel panel-default”> <div class=”panel-heading”>Title</div> <div class=”panel-body”> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> </div> </div> http://www.bootply.com/114526

Bootstrap 3 Gutter Size

December 25, 2023 by Tarik

try: .row { margin-left: 0; margin-right: 0; } Every column have a padding of 15 px on both sides. Which makes a gutter between of 30 px. In the case of the sm-grid your container class will 970px (((940px + @grid-gutter-width))). Every column get a width of 940/12. The resulting @grid-gutter-width/2 on both sides of … Read more

Static Html Website – Bootstrap – Multi language Support

December 25, 2023 by Tarik

You can do this within a single file without using any server-side programming languages. You should check out i18next for a proper javascript solution. You can also use pure CSS to translate a homepage. Try something like .en, .de, .it { display:none; } /* hide all elements with a language class */ .en:lang(en), .de:lang(de), .it:lang(it) … Read more

How do I set up Bootstrap after downloading via Composer?

December 25, 2023 by Tarik

We have artisan command to publish the assets(CSS, JS,..). Something like this should work. php artisan asset:publish –path=”vendor/twitter/bootstrap/bootstrap/css” bootstrap/css php artisan asset:publish –path=”vendor/twitter/bootstrap/bootstrap/js” bootstrap/js i am not sure about the path.. But this should work.

Carousel with Thumbnails in Bootstrap 3.0

December 24, 2023 by Tarik

Bootstrap 4 (update 2019) A multi-item carousel can be accomplished in several ways as explained here. Another option is to use separate thumbnails to navigate the carousel slides. Bootstrap 3 (original answer) This can be done using the grid inside each carousel item. <div id=”myCarousel” class=”carousel slide”> <div class=”carousel-inner”> <div class=”item active”> <div class=”row”> <div … Read more

Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

December 24, 2023 by Tarik

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below : <script src=”https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js”></script> add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards) $(document).ready(function() { var last=$.cookie(‘activeAccordionGroup’); if (last!=null) { //remove … Read more

How to get dynamic data-offset values for Bootstrap 3 affix method

December 22, 2023 by Tarik

You could use jQuery to get the dynamic content height above the navbar. For example: $(‘#nav’).affix({ offset: { top: $(‘header’).height() } }); Working demo: http://bootply.com/69848 In some cases, offset.bottom must also be calculated to determine when to “un-affix” the element. Here’s an example of affix-bottom

Knockout + Bootstrap 3 Radio Buttons

December 21, 2023 by Tarik

The bootstrap buttons and the knockout checked binding are still not playing nice: knockout uses the click event inside the checked binding to tigger the underlaying observable to change bootstrap subscribes on the click event to do the toggling but calls e.preventDefault() so KO won’t be notified about the click. One possible solution is to … Read more

Bootstrap 3 dropdown select

December 21, 2023 by Tarik

We just switched our site to bootstrap 3 and we have a bunch of forms…wasn’t fun but once you get the hang it’s not too bad. Is this what you are looking for? Demo Here <div class=”form-group”> <label class=”control-label col-sm-offset-2 col-sm-2″ for=”company”>Company</label> <div class=”col-sm-6 col-md-4″> <select id=”company” class=”form-control”> <option>small</option> <option>medium</option> <option>large</option> </select> </div> </div>

Twitter Bootstrap. Why do modal events work in JQuery but NOT in pure JS?

December 15, 2023 by Tarik

The reasoning behind this is because Twitter Bootstrap uses that.$element.trigger(‘hidden.bs.modal’)(line 997) to trigger it’s events. In other words it uses .trigger. Now jQuery keeps track of each element’s event handlers (all .on or .bind or .click etc) using ._data. This is because there isn’t any other way to get the event handlers that are bound … Read more