I'm trying to make a modal window open up when I press a link in my Navbar. I've tried to copy and paste some example code and adjust it a bit but nothing happens when I press the link. What am I missing? I'm still learning Bootstrap so bear with me :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cool Website</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/enabletooltips.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index-styling.css">
</head>
<body>
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<span>Login</span>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Upload, Comment and Rate!">Not Registered? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="header-container">
<div class="container" style="padding-top: 25px">
<div class="jumbotron jumbotronic">
<h1 class="h1">Cool Website</h1>
<p>Catchphrase!</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Search Here</div>
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn">Button 1</button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn">Button 2</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn">Button 3</button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>This website was made using the following tools</span>
<br>
<span>
Bootstrap | glyphicons
</span>
</div>
</div>
</div>
</body>
</html>
EDIT: Full Code Put up
Working good, You have to include bootstraps.min.js
like this :
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/enabletooltips.js"></script>
More it's better to put script a the end of the page.
Related
I have been trying a lot of times but still no use i am not able to display my modal in the navbar tabs. When i click on it a blur is triggered. Can someone please help me?
MY Template,
addnewrecord() {
$('#editmodel').modal('show');
}
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="tabbable tabs-left mb-lg">
<ul id="tabs2" class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Home</a>
</li>
<li class="nav-item"><a class="nav-link active" [routerLink]="['/app/tables/basic']" data-toggle="tab">Chatter</a>
</li>
</ul>
<div id="tabs2c" class="tab-content bg-info-light">
<div class="tab-pane active">
<div class="page-title">
<div class="btn-group">
<button class="btn btn-sm btn-default" (click)='addnewrecord()'>
New
</button>
</div>
</div>
<div class="modal fade" id="editmodel" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form id='form' class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false" novalidate="novalidate">
<div class="form-group">
<label for="email">FirstName:</label>
<input type="text" [(ngModel)]='student.accountname' name='accountname' class="form-control" id="email" placeholder="Enter Firstname" required='required'>
</div>
<button type="submit" class="btn btn-primary" (click)='insertdata(student,student._id)'>{{buttonname}}</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)='resetform()'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please try this code,
$('#editmodel').show();
Im having some problems with layout of bootstrap.
I have looked at the link below to find some details about the situation.
How can I get a Bootstrap column to span multiple rows?
However, i couldnt figure out how to fix this issue:
----------What i have----------
Picture current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- First row, directions -->
<div class="row top-buffer">
<div class="col-md-12">
<br><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<div class="row">
<div class="col-md-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
</body>
</html>
----------What i want----------
picture wanted
*Note, the extended box (left) should fill the entire row
You cannot span rows or columns as if them were tabe's. You should change your markup a little
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row { border: 1px solid #f00;}
[class*="col-"] { border: 1px solid #0f0; }
</style>
<div class="container">
<div class="row top-buffer">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
</div>
I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.
I have a navbar that looks like this:
When I try and shrink the page to simulate a mobile device however, it doesn't collapse quite right:
It's supposed to collapse so that the button that is sort of hidden behind the "Register" text becomes the toggle for the menu. Here is my code:
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar">Home</span>
<span class="icon-bar">About</span>
<span class="icon-bar">Contact</span>
<span class="icon-bar">Playground</span>
<span class="icon-bar">Login</span>
<span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
</button>
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Playground
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If that's all the related code then you shouldn't need anything outside the default classes.
See Default Navbar Docs.
You shouldn't need these modal links in the header and then again within the navbars links, these are whats covering up the mobile toggle button.
And your HTML structure is off and/or missing some pieces. Again if you refer to the Docs you'll see the inconsistencies, you need to put your toggle button inside the navbar-header class, navbar-form does not belong inside of a li item etc.
See working example Snippet.
*Note that because you links that utilize a lot of space at around 875px you'll see your navbar overflow to a new line (a CSS media query turns the background red when this happens in my example). One solution is to reduce the length of the link title(s) to prevent this:
ie Want to Register? Click Here! to just Register!.
#media (max-width: 875px) {
html,
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Playground
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li> Login
</li>
<li> Want to Register? Click Here!
</li>
</ul>
</div>
</div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>
</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">Remember Me</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to make a search-bar that looks like :
But the following HTML snippet gives a search-bar that looks something like :
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</nav>
How could I make the size of search-bar same as that of the button?
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</form>
</nav>
You need to use Bootstrap's input group class and put your button appropriately inside it.
HTML CODE:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
Any problem See this tutorial http://bootsnipp.com/snippets/featured/search-panel-with-filters
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume