Vowels Using Switch Statement

<? php
Echo Vowels are: . </br>
For($j=a; $j<=z; $j++)
{
Switch($j)
{
Case a;
Case e;
Case i;
Case o;
Case u

echo $j. </br>;}

}
?>

Implementation in Bootstrap

1. Dropdown

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button"

id="dropdownMenu1" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="true">

Dropdown

<span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

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

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

 </ul>

</div>

2. Carousel

<div id="carouselExampleIndicators" class="carousel slide" data-

ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0"

class="active"></li>

<li data-target="#carouselExampleIndicators" data-slide-

to="1"></li>

<li data-target="#carouselExampleIndicators" data-slide-

to="2"></li>

</ol>

<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<img class="d-block img-fluid" src="..." alt="First slide">

</div>

<div class="carousel-item">

<img class="d-block img-fluid" src="..." alt="Second slide">

</div>

<div class="carousel-item">

<img class="d-block img-fluid" src="..." alt="Third slide">

</div>

</div>
 <a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button" data-
slide="prev">

<span class="carousel-control-prev-icon" aria-

hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next"
href="#carouselExampleIndicators" role="button" data-
slide="next">

<span class="carousel-control-next-icon" aria-

hidden="true"></span>

<span class="sr-only">Next</span>

</a></div>

3. Modals

<!-- Button trigger modal --><button type="button" class="btn btn-

primary" data-toggle="modal" data-target="#exampleModal">

Launch demo modal</button>

<!-- Modal --><div class="modal fade" id="myModal" tabindex="-

1" role="dialog" aria-labelledby="exampleModalLabel" aria-
hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Modal

title</h5>

<button type="button" class="close" data-dismiss="modal"

aria-label="Close">

<span aria-hidden="true">&times;</span>
 </button>

</div>

<div class="modal-body">

...

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-

dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save

changes</button>

</div>

</div>

</div></div>

4. Buttons

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

5. Navigation
nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Home</a>

 <img alt="Brand" src="...">

</div>

</div></nav>

6. Tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>