"Voice search with icons"
Bootstrap 4.1.1 Snippet by hiteshvisit

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <title>Voice Search</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed:300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" type="text/css" href = "voice.css"> </head> <body> <div id = "main" class = "z-depth-4"> <p id = "head"><i class="material-icons" id = "plus">add</i> <i class="material-icons" id = "smile">sentiment_satisfied_alt</i> </p> <center> <div id = "body"> <br> <p id = "speak">Tap to speak</p><br><br> <p id = "icons"><i class="material-icons" id = "set">settings</i>     <a class="waves-effect waves-light btn"><i class="material-icons" id = "mic">mic</i></a>      <i class="material-icons" id = "back">backspace</i></p> <br><br> <p id = "voice">Voice</p> <p id = "nav"><i class="material-icons left" id = "left">arrow_left </i> <i class="material-icons" id = "apps">apps</i> <i class="material-icons right" id = "square">crop_square</i></p> </div> </center> </div> <a href="https://bbbootstrap.com" target="_blank">BBBootstrap.com</a> </body> </html>
#main{ width: 30vw; height: auto; margin: auto; position: relative; top: 20vh; background-color: #e0f2f1; } body{ background-color: white; } #head{ padding : 0.5vw; background-color: white; } #plus, #smile{ font-size: 2.5vw; color: rgb(0,0,0,0.5); } #speak{ font-size: 2vw; } .btn{ height: 5vw; width: 5vw; border-radius: 4vw; } #mic{ font-size: 3vw; position: relative; top: 3vh; } #set, #back{ font-size: 2vw; position: relative; top: 2vh; } #voice{ font-size: 2vw; position: relative; color: rgb(0,0,0,0.3); } #left{ font-size: 5vw; color: rgb(0,0,0,0.3); } #apps, #square{ font-size: 3vw; position: relative; top: 2vh; right: 1vw; color: rgb(0,0,0,0.3); } i{ cursor: pointer; } @media only screen and (max-width: 425px){ #main{ width: 100vw; height: 110vw; } #plus, #smile{ font-size: 9vw; } #speak{ font-size: 7vw; } .btn{ height: 17vw; width: 17vw; border-radius: 12vw; } #mic{ font-size: 10vw; position: relative; top: 2.5vw; right: 1.5vw; } #set, #back{ font-size: 6vw; } #voice{ font-size: 6vw; } #left{ font-size: 15vw; } #apps, #square{ font-size: 9vw; position: relative; top: 2vw; right: 3vw; } }

Related: See More

Light Bootstrap Dashboard Pro
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: