i have this markup for twitter bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Modus - Clientportal</title>
<link rel="stylesheet" href="/packages/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Modus - Clientportal</a>
<p class="navbar-text">You are logged in as Sebastian</p>
</div>
<div class="navbar-collapse collapse">d
<div class="navbar-right">
<ul class="nav navbar-nav ">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<a class="btn btn-default navbar-btn" href="/logout">Logout</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">profile.title</h3>
</div>
<div class="panel-body">
<form method="POST" action="/profile" accept-charset="UTF-8">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPasswordConfirmation1">Password Confirmation</label>
<input type="password" class="form-control" id="exampleInputPasswordConfirmation1" placeholder="Password">
</div>
<input class="btn btn-primary" type="submit" value="profile.btn.save">
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/packages/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
if i load this up the fixed-navbar breaks and lose its height.
The only solution i found yet was to change the type of the Password fields to anything else, but that cant be the solution since i need a password field there.
any suggestions?
Related
I'm trying to pull on the right in the header a button with a input text field, this is my code:
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix"></div>
</div>
so as you can see, I have on the left the title of the header and on the right i want on the same line the input and one or more buttons, the problem is if I add only button it's work perfectly, all on the same line, if I add a form-group in input go in two line as you can see in the image below.
How can I have all in the same line?
Thanks
Try to make this div
div class="form-group label-floating"
go inline with the button
button id="show-hide-filter-button"
using css "display: inline-block" on the div (by default it goes with "display: block")
Add display:inline to the .form-group, or display:flex to the .pull-right
You can do this with Flexbox just use display: flex on both header and pull-right class.
.page-header, .pull-right {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
</div>
The buttons and the field container should have "display:inline-block;":
<div class="page-header">
<div class="pull-left" style="float:left;">
<h2>Header</h2>
</div>
<div class="pull-right" style="float:right;">
<div class="form-group label-floating" style="display:inline-block;">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix" style="clear:both;"></div>
</div>
Try this fiddle
<nav class="navbar page-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Header</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control search">
</div>
<button type="submit" class="btn btn-transparent">Mostra Filtro</button>
</form>
</div>
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.
I have a navigation bar set up on my website, I have set up a search bar towards the right of the navigation bar, see code below
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-danger" href="index.php">Network TV</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Top rated</li>
<li>Most Popular by Genre</li>
<li>Music</li>
<li>Suggestions</li>
<li id="adminpanel">Admin control panel</li>
<li> </li>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-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"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</ul>
</div>
</div>
</div>
</nav>
I am wondering how do I make it so when the user types information into the search bar the results will be displayed in a bootstrap modal. for example they type 'Movies' a movies modal will pop up with name of movies in it. Here is a close up look of the search bar
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-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"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
This depends on how you are planning to grab the data. If I have it right, you're looking to just make a POST/GET request to some database for Movies. Looks like php, maybe Wordpress/Drupal, so guessing it'd be a MySQL request.
Here's a (free) tutorial from PHP Academy, Alex is a good tutor.
PHPAcademy Video:
https://www.youtube.com/watch?v=Yb3c-HljFro
Cheers.
<div class="container h-100">
<form method="POST" action="jq.php">
<div class="d-flex justify-content-center h-100">
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<i class="fas fa-search"></i>
</div>
</div>
</form>
</div>
I am using bootstreap 3. My code is below div .navbar is showing properly on top.
But problem is with .container it is not showing below the .navbar
What change should I make to work it properly
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Office</a>
</div>
<div class="navbar-collapse collapse pull-right top-margin">
<form class="form-inline" method="post" action="login">
<div class="form-group">
<input type="text" placeholder="Username" name="userName" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs10">Join us</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Sign Up</button>
</div>
</div>
</div>
</body>
You need to add padding to the top of the body for fixed navbars:
body { padding-top: 70px; }
From the docs:
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
I am using bootstraps 3 to create a nav bar and for the life of me I cannot get it to layout the way I would like. I am having a hard time learning all these bootstrap classes. Anyways I would like all 5 of my elements here to be layed out horizontally in a single row but as you will see in the fiddle all 5 components are on a different row. Any suggestions?
Fiddle : http://jsfiddle.net/cdewey/7M7sj/1/
Code:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<form class="form form-horizontal" role="form">
<ul class="nav navbar-nav">
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker1' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</div>
</li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
pickDate: false
});
$('#datetimepicker3').datetimepicker({
pickDate: false
});
$('#datetimepicker1').datetimepicker({
pickTime: false
});
});
</script>
</nav>
Use this tag to open the menu div:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Look this really clear example to understand how it works: http://getbootstrap.com/examples/navbar-fixed-top/
JSFiddle Demo
You must remove the <div class="form-group"> after the li and put it just after the ul.
The <div class="form-group"> just creates separate entities for every li. Look at the demo I provided. You will understand.