Home > DeveloperSection > Articles > Bootstrap Components Part II

Bootstrap Components Part II


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 3782  View(s)
Rate this:

Bootstrap Components Part II

In my last post, I have explained some of the Bootstrap Components  in  Bootstrap Components - Part 1. This post is just the extension of the same.

In this article, I am explaining Bootstrap Carousel, Modal Popup, Popover, Tooltip, Accordion etc. In my previous post I have explained some bootstrap components part I like: Button, Input Group, Tabs, Pills, Navbar, Paging, Label, Badges, Alerts, and Progress bar.

Use These three files in your application.

<link href="~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/scripts/jquery-2.1.0.min.js"></script>

<script src="~/scripts/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>

 

1. Use Bootstrap Carousel

 

Bootstrap carousel component use for slider in cycling elements. Carousels require the use of an id on the container div of carousel for carousel controls to function properly.

Example:

Here is Html code:-

 

<div id="myCarousel" class="carousel slide">

    <!-- Indicators -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

        <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <div class="carousel-inner">

        <div class="item active">

            <img src="@Url.Content("~/Images/Sample1.png")">

        </div>

        <div class="item">

            <img src="@Url.Content("~/Images/Sample2.png")">

        </div>

        <div class="item">

            <img src="@Url.Content("~/Images/Sample3.png")">

        </div>

        <div class="item">

            <img src="@Url.Content("~/Images/Sample4.png")">

        </div>

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

        <span class="icon-prev"></span>

    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">

        <span class="icon-next"></span>

    </a>

 

</div>

 

Here is CSS code:-

 

<style>

    img {

        width100%;

        max-width100%;

    }

 

    #myCarousel li {

        border1px solid #B4B4B4;

    }

 

    #myCarousel .active {

        background-color#B4B4B4;

    }

</style>

 

Here is JavaScript code:-

 

<script>

    $(function () {

        $("#myCarousel").carousel({

            interval: 3000

        });

    });

 

</script>

Result:

Bootstrap Components Part II

 

 

2. Use Bootstrap Modal Popup

 

 

Modal popup are flexible, dialog prompts with the minimum required functionality and smart defaults. Be sure not to open a modal while another is still visible. A rendered modal with header, body, and set of actions in the footer.

Example:

Here is Html code:-

 

Index.ccshtml:

<br /><br />

<div class="container">

    @Html.ActionLink("Open""ModalPopup""Home"new { @class = "modelpopup btn btn-info" })

</div>

 

<div id='div-modal' class="modal fade" tabindex="-1" style="top10%;">

    <div class="modal-dialog" style="max-width500pxmargin30px auto;">

        <div id='div-modal-content' class="modal-content"></div>

    </div>

</div>

Modal Popup Html code:-

 

Modalpop.cshtml:

<div class="modal-header hed">

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

    <h4 class="modal-title">Demo ModelPopUp</h4>

</div>

<div class="modal-body container-fluid" style="padding-bottom0;">

    <div class="row">

        <div class="col-md-4">

            <label>Name</label>

        </div>

        <div class="col-md-8">

            <input type="text" />

        </div>

    </div>

    <div class="row">

        <div class="col-md-4">

            <label>Email ID</label>

        </div>

        <div class="col-md-8">

            <input type="text" />

        </div>

    </div>

</div>

<div class="modal-footer">

    <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">Close</button>

    <button type="button" class="btn btn-primary" id="btnDownlaod">Click</button>

</div>

 

 

Here is JavaScript code:-

 

 

    $(document).ready(function () {

        $(".modelpopup").click(function () {

            $('#div-modal-content').load(this.href, function () {

                $('#div-modal').modal({

                    backdrop: 'static',

                    keyboard: true,

                    height: 300,

                    width: 200,

                }, 'show');

            });

            return false;

        });

    });

Here is Controller code:-

 

        public ActionResult ModalPopup()

        {

            return View("ModalPopup");

        }

 

Result:

Bootstrap Components Part II

 

3. Use Bootstrap Popover

 

Example:

 

Here is Html code:-

 

<div class="container">

    <h1>Use Bootstrap Popover</h1>

    <br />

    <br />

    <button type="button" class="col-md-offset-4 btn btn-primary popover-dismiss" data-toggle="popover" title=" Bootstrap popover"data-placement="left" data-content="This is Bootstrap Popover">Button1</button>

    <button type="button" class="btn btn-info popover-dismiss" data-toggle="popover" title=" Bootstrap popover" data-placement="top"data-content="This is Bootstrap Popover">Button2</button>

    <button type="button" class="btn btn-warning popover-dismiss" data-toggle="popover" title=" Bootstrap popover" data-placement="bottom" data-content="This is Bootstrap Popover">Button3</button>

    <button type="button" class="btn btn-danger popover-dismiss" data-toggle="popover" title=" Bootstrap popover" data-placement="right" data-content="This is Bootstrap Popover">Button4</button>

</div>

 

Here is JavaScript code:-

 

$(document).ready(function () {

        $('.popover-dismiss').popover({

            trigger: 'focus'

        })

    });

 

1.  Data – Toggle - data-toggle is use for popover.

2.  Data – Placement - data-placement is use for popover position there is four position (left, right, top, bottom).

3.  Title - title is use for popover message.

 

Result:

Bootstrap Components Part II

 

 

4. Use Bootstrap Tooltip

 

Example:

 

Here is Html code:-

 

<div class="container">

    <h1>Use Bootstrap Tooltip</h1>

    <br />

    <br />

    <button type="button" class="btn btn-primary tooltips" data-toggle="tooltip" data-placement="left" title="Bootstrap Tooltip left">Button1</button>

 

    <button type="button" class="btn btn-info tooltips" data-toggle="tooltip" data-placement="top" title="Bootstrap Tooltip top">Button2</button>

 

    <button type="button" class="btn btn-success tooltips" data-toggle="tooltip" data-placement="bottom" title="Bootstrap Tooltip bottom">Button3</button>

 

    <button type="button" class="btn btn-warning tooltips" data-toggle="tooltip" data-placement="right" title="Bootstrap Tooltip right">Button4</button>

</div>

 

Here is JavaScript code:-

 

$(document).ready(function () {

        $('.tooltips').tooltip({

            trigger: 'focus'

        })

    });

 

4.  Data – Toggle - data-toggle is use for tooltip.

5.  Data – Placement - data-placement is use for tooltip position there is four position (left, right, top, bottom).

6.  Title - title is use for tooltip message.

 

 

Result:

Bootstrap Components Part II

 

5. Use Bootstrap Accordion

 

Example:

 

Here is Html code:-

 

<br />

    <h1>Use Bootstrap Accordion</h1>

    <br />

    <div class="panel-group" id="accordion">

        <div class="panel panel-default">

            <div class="panel-heading">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Admin</a>

                </h4>

            </div>

            <div id="collapseOne" class="panel-collapse collapse in">

                <div class="panel-body">

                    Admin Section

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Executive</a>

                </h4>

            </div>

            <div id="collapseTwo" class="panel-collapse collapse">

                <div class="panel-body">

                    Executive Section

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">User</a>

                </h4>

            </div>

            <div id="collapseThree" class="panel-collapse collapse">

                <div class="panel-body">

                    User Section

                </div>

            </div>

        </div>

    </div>

 

Here is Javascript code:-

 

$('#accordion').collapse({

            toggle: false

        })

 

Result:

Bootstrap Components Part II

 


Don't want to miss updates? Please click the below button!

Follow MindStick