Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="">
    <title>Starter Template for Bootstrap</title>
​
    <!-- Bootstrap core CSS -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
​
​
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
 <![endif]-->
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
​
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
        /* Set padding to keep content from hitting the edges */
        .body-content {
            padding-left: 15px;
            padding-right: 15px;
        }
    </style>
</head>
​
<body>
    <div class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container ">
            <div class="navbar-header ">
                <button type="button " class="navbar-toggle " data-toggle="collapse " data-target=".navbar-collapse ">
                    <span class="icon-bar "></span>
                    <span class="icon-bar "></span>
                    <span class="icon-bar "></span>
                </button>
                <a class="navbar-brand " href="/ ">Application name</a>
            </div>
            <div class="navbar-collapse collapse ">
                <ul class="nav navbar-nav ">
                    <li>
                        <a href="/ ">Home</a>
                    </li>
                    <li>
                        <a href="/Home/About ">About</a>
                    </li>
                    <li>
                        <a href="/Home/Contact ">Contact</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right ">
                    <li>
                        <a href="/Account/Register " id="registerLink ">Register</a>
                    </li>
                    <li>
                        <a href="/Account/Login " id="loginLink ">Log in</a>
                    </li>
                </ul>
​
            </div>
        </div>
    </div>
    <div class="container body-content ">
        <div class="jumbotron">
            <h1>Testing Responsive sidemenu</h1>
            <p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
            </p>
        </div>
        <div class="row">
            <div class="col-md3 pull-left">
                <div class="bs-sidebar hidden-print affix-top" id="sidemenu">
                    <ul class="nav bs-sidenav">
​
​
                        <li class="nav-header">
                            <a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
​
​
                            <ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
​
                                <li class="">
                                    <a href="lnk" title="">
                                        Manage Members
                                        <i class=" glyphicon glyphicon-chevron-right pull-right">
                                        </i>
                                    </a>
                                </li>
                                <li>
                                    <a href="/Admin/Member/addnew" title="">
                                        Add A New Member
                                        <i class=" glyphicon glyphicon-chevron-right pull-right">
                                        </i>
                                    </a>
                                </li>
​
                            </ul>
                        </li>
​
                        <li class="nav-header">
                            <a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
​
​
                            <ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
​
                                <li>
                                    <a href="/Public" title="">
                                        Home
                                        <i class=" glyphicon glyphicon-chevron-right pull-right">
                                        </i>
                                    </a>
                                </li>
                                <li>
                                    <a href="/Public/Contact" title="">
                                        Contact Us
                                        <i class=" glyphicon glyphicon-chevron-right pull-right">
                                        </i>
                                    </a>
                                </li>
​
                            </ul>
                        </li>
​
                </div>
            </div>
            <div class="col-md-8 pull-left">
​
​
                <article>
​
                    <p>
                        Sem ornare sit amet proin sem sapien, auctor vel faucibus id, aliquet vitae ipsum etiam auctor ultricies ante, at dapibus urna viverra sed nullam mi arcu, tempor vitae interdum a, sodales non urna vestibulum dignissim auctor mauris, ac elementum purus fermentum vitae duis placerat laoreet risus, sit amet eleifend tellus lobortis non vivamus iaculis dapibus leo a ornare cras vel sem at felis convallis mollis posuere ultrices dolor sed tellus arcu, accumsan a consectetur sit amet, volutpat eget lorem phasellus quis ipsum orci integer sodales tincidunt nibh a elementum ut ac libero nec orci euismod euismod nec at nulla duis malesuada faucibus porta aliquam nec consequat eros sed porttitor placerat dolor, accumsan imperdiet neque ornare in aenean non elit non leo porta mattis mauris non dolor nunc, id congue odio donec tellus nisl, semper id consectetur vitae, dapibus dictum nisl morbi sed augue purus sed dictum diam convallis tortor interdum volutpat phasellus dapibus arcu sit amet neque vulputate sed elementum orci fringilla in hac habitasse platea dictumst maecenas ut dui diam curabitur adipiscing vestibulum libero, nec varius dui pulvinar eget vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; aliquam dui neque, varius eu laoreet vel.
                    </p>
                </article>
            </div>
​
            <div class="col-md-1 pull-right"></div>
​
        </div>
    </div>
      <hr/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- compiled and minified Bootstrap JavaScript -->
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tbertenshawpro
0viewers