Bootstrap toggle

first include this

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>

then you can change a checkbox to toggle

<input checked data-toggle="toggle" type="checkbox">

source: http://www.bootstraptoggle.com/

#bootstrap #frontend #webdev

Advertisements

Bootstrap Carousel Full Screen

source: http://stackoverflow.com/questions/16350902/bootstrap-carousel-full-screen

also check this for live example: http://jsfiddle.net/heyallanmoreno/7TdVu/4/

<quote>

I use full width slider in almost every bootstrap project. Here’s my approach to it:

1) Wrap the carousel into a custom full width container (outside any .container class)
2) Set the width of the image slides and its container to 100%
3) Set the height of the slider as desired

And it goes like this:

<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
    </div>
</section>

And the CSS would look like this:

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

Templates to watch: SB Admin 2

SB Admin 2 is the update of SB Admin. It is a free admin template based on twitter bootstrap framework.

features:

  • New! Bower support now available! Install this template through the command line using bower install startbootstrap-sb-admin-2!
  • Responsive sidebar menu with multi-level dropdowns and active classes
  • LESS files included for deeper customization
  • Responsive top navigation menu with dropdown menu items
  • 3 custom panel styles: red, yellow, and green
  • Two Powerful jQuery charting plugins, Flot Charts and Morris.js
  • Sortable, searchable, multi-page Bootstrap tables using the DataTables jQuery plugin
  • Custom circle icon buttons from Bootsnipp
  • Built-in library of Bootstrap social buttons from Bootstrap Social
  • Responsive Bootstrap timeline from Bootsnipp
  • Bootstrap chat widget from Bootsnipp
  • Login page by Bootsnipp

 You can download it from here: http://startbootstrap.com/template-overviews/sb-admin-2/

The ugly way to get twitter bootstrap in spring MVC

Ok, I know maven is great, but I am not able to work with it! You may call me a noob in spring and Java EE so it may be possible that I am not getting it properly, but here is an ugly way to enhance my page with bootstrap.

In servlet-context.xml, make sure this line exist

<resources mapping="/resources/**" location="/resources/" />

If it is already inside that xml file, you are lucky like me. Now download twitter bootstrap and put them in resources folder of your webapp folder.

if you have done it, then you can get bootstrap in your web view. try this

<script src="<c:url value="/resources/js/jquery.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/bootstrap.min.css" />" />

And then, do your design.

BTW, did i mention that you will need jquery to use bootstrap?

Pingendo The simplest app to prototype with Bootstrap

http://pingendo.com/