ShapeYourPath
(current)
Run Code
Live Code Editor- Materialize CSS Fixed Width Tabs
Source Code
<!DOCTYPE html> <html lang="en"> <head> <title>Materialize CSS Fixed Width Tabs</title> <meta name="viewport" content="width = device-width, initial-scale = 1" /> <meta name="description" content=""> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style type="text/css"> h1{font-size:30px;} p{font-size: 18px;} </style> </head> <body> <h1>Materialize CSS Fixed Width Tabs</h1> <p>Learn and understand Materialize CSS Tabs with the help of an example.</p> <div class="row"> <div class="col s12"> <ul class="tabs z-depth-1 tabs-fixed-width"> <li class="tab col"><a href="#html5">HTML5</a></li> <li class="tab col"><a href="#css3">CSS3</a></li> <li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li> <li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li> <li class="tab col disabled"><a href="#java_script">JavaScript</a></li> </ul> <div id="html5" class="col s12"> <h3>HTML5 Tutorial</h3> </div> <div id="css3" class="col s12"> <h3>CSS3 Tutorial</h3> </div> <div id="md_css" class="col s12"> <h3>Materialize CSS Tutorial</h3> </div> <div id="bootstrap_4" class="col s12"> <h3>Bootstrap 4 Tutorial</h3> </div> <div id="java_script" class="col s12"> <h3>JavaScript Tutorial</h3> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(".tabs").tabs(); }); </script> </body> </html>
Output :
Running