What is Regex? Regular expressions (regex) are a sequence of specific characters itself. Generally the regex consists of arithmatic operators & alphanumeric characters to construct specific patterns. These patterns are widely used for customized validation as per user requirement. Functions PHP provides us three functions to deal with regular expressions: preg_match: The function is used … Read more
The Modal components are useful in situations like, when you need to bring the users attention to some message or a popup. These are basically dialog boxes/popup windows that are displayed on top of the page. Creating a Bootstrap Modal The code below illustrates how modals can be created using Bootstrap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Add animation in … Read more
In this chapter, we will learn about the different ways in which Bootstrap 4 can help you stylize the List groups Bootstrap Basic List Groups So, the basic contextual class for list groups is the .list-group class. Unordered list or <ul> is the most basic list group that we have and we use the .list-group … Read more
Inputs groups are special containers that have a form input and some text or icon attached to them that enhances the readability of the input. Bootstrap Basic Input Groups Here are the basic steps for creating and input group: The basic contextual class needed for an input group is the .input-group class. As told before, … Read more
Bootstrap 4 has a lot to offer for creating some flawless forms various data input purposes in the websites. We have many form layouts and contextual classes that we’ll learn about in this chapter. Let’s have a look: Bootstrap’s Default Settings There are some global styling features that the Form controls automatically get when used … Read more
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:
1 2 3 4 5 6 7 8 9 | <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> |
The basic contextual … Read more
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
1 2 3 4 | <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> 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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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> |
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 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.
1 2 3 | <div class="card"> <div class="card-body">Basic card</div> </div> |
Header and Footer … Read more
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
