Bootstrap Archives - Page 4 of 4

Bootstrap Dropdowns

June 29, 2020September 3, 2018 by manish

The dropdown menus can be stylised and controlled better using the contextual classes provided by Bootstrap. Bootstrap Basic Dropdown It is well known that dropdown menu is basically a list of toggleable options from which you can choose anyone. The basic dropdown menu in Bootstrap can be created using below code:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
    </ul>
</div>

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example

<li><a href="#">JavaScript</a></li>

</ul>

</div>

The basic contextual … Read more

Bootstrap Collapsible

June 29, 2020September 3, 2018 by manish

Bootstrap Basic Collapsible Bootstrap Collapsibles can be used to hide/show large amount of content. Here’s the sample code for a basic collapsible element

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
    Bootstrap Collapsible Demo
</div>

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

Bootstrap Collapsible Demo

</div>

Here, the .collapse class is the basic contextual class for the collapsible element. You can use this class with elements like <div>; thus, the content can be hidden or made visible … Read more

Bootstrap Carousel

June 29, 2020September 3, 2018 by manish

A Carousel in Bootstrap 4 is nothing but a slideshow that can be used for cycling through elements. Bootstrap Creating a Carousel Observe the code below to understand how a Carousel is created.

<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="la.jpg" alt="Los Angeles">
        </div>
        <div class="carousel-item">
            <img src="chicago.jpg" alt="Chicago">
        </div>
        <div class="carousel-item">
            <img src="ny.jpg" alt="New York">
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

</ul>

</div>

</div>

</div>

</a>

</a>

</div>

So here’s what actually happened: .carousel was used to create a Carousel .carousel-indicators was used to add the indicators. These are … Read more

Bootstrap Cards

June 28, 2020September 3, 2018 by manish

Bootstrap 4 cards which, basically, are bordered boxes with some content and some padding around it. We can style them for headers, footers, content, colors, etc. Bootstrap 4 Basic Card The basic cards in Bootstrap 4 are created using the .card class. The content inside these cards use the .card-body class.

<div class="card">
    <div class="card-body">Basic card</div>
</div>

<div class="card-body">Basic card</div>

</div>

Header and Footer … Read more

Bootstrap Buttons

June 29, 2020September 3, 2018 by manish

The buttons are used for a variety of purposes. Styling them according to their usage not only makes them look good but also understandable to the user. Let’s have a look at the different features that Bootstrap has for buttons. Bootstrap Button Styles Bootstrap 4 has following contextual classes for styling the buttons. .btn: Basic … Read more

Bootstrap 4 Download, CDN and precompiled file details

April 28, 2021September 2, 2018 by manish

Here, we will explore what all Bootstrap has to offer. We will also get to know about some pre compiled and source code flavors. You need to keep in mind that the JS plugins in Bootstrap need jQuery. Precompiled Bootstrap Here’s what you can expect after downloading and unzipping the compressed folder from https://www.getbootstrap.com

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-grid.css

│ ├── bootstrap-grid.css.map

│ ├── bootstrap-grid.min.css

│ ├── bootstrap-grid.min.css.map

│ ├── bootstrap-reboot.css

│ ├── bootstrap-reboot.css.map

│ ├── bootstrap-reboot.min.css

│ └── bootstrap-reboot.min.css.map

└── js/

├── bootstrap.bundle.js

├── bootstrap.bundle.min.js

├── bootstrap.js

└── bootstrap.min.js

Bootstrap 4 Installation and Download

April 28, 2021September 2, 2018 by manish

Where to Get Bootstrap 4? Getting started with Bootstrap is quite easy. To begin using Bootstrap with your website you need to get it installed by one of the following techniques: Include bootstrap 4 CDN link in your project from CDN Get it downloaded from getbootstrap.com Bootstrap 4 CDN CDN stands for Content Delivery Network. … Read more