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 {
        width: 100%;
        max-width: 100%;
    }
 
    #myCarousel li {
        border: 1px solid #B4B4B4;
    }
 
    #myCarousel .active {
        background-color: #B4B4B4;
    }
</style>

Here is JavaScript code:-

<script>
    $(function () {
        $("#myCarousel").carousel({
            interval: 3000
        });
    });
 
</script>

Result:

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="top: 10%;">
    <div class="modal-dialog" style="max-width: 500px; margin: 30px 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-bottom: 0;">
    <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:

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:

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:

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: