I have the following HTML with navbar, 3 column body and a large footer bar. I have included a button on the navbar clicking which a modal should pop up. I have used the basic example given in the WS schools as a demo one. The WSS demo works flawlessly when I run it as a standalone page. However, when I include the same example in my html, the modal is not popping up. I have included the script in JSFiddle too https://jsfiddle.net/3Lonzx1f/2/.
I am including the same below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- View meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DEMO
</title>
<!-- Color CSS Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<script src="https://use.fontawesome.com/f87c84f770.js"></script>
<script src="jtree.js"></script>
<style type="text/css">
body, html, .sidebar, .body .rhsbar{
height: 100%;
min-height: 100%;
}
html, body {overflow:auto}
body { padding-bottom: 200px; }
#container{
width:100%;
height:100%;
/* position:absolute; */
}
.sidebar{
width:25%;
float:left;
height:100%;
border-right: solid 6px #f1ded9;
overflow-y: auto;
}
.body{
background-color: white;
float:left;
width:50%;
height:100%;
}
.rhsbar1{
background-color: white;
float:right;
width:25%;
height:10%;
border-left: solid 6px #f1ded9;
overflow-y: auto;
}
.rhsbar2{
background-color: white;
float:right;
width:25%;
height:90%;
border-left: solid 6px #f1ded9;
border-top: solid 6px #f1ded9;
}
.rhsbar2 .xmldirectories{
margin-top: 50px;
padding:2px;
}
.navbar {
height: 20px;
position: absolute;
background-color: black;
width:100%;
border-bottom: solid 6px #f1ded9;
z-index:999;
}
#loaded_img_panel {
display:block;
height: 200px;
position: relative;
background-color: white;
overflow: auto;
white-space: nowrap;
border-top: solid 6px #f1ded9;
}
</style>
</head>
<body>
<div class="navbar">
<div class="col-sm-1" style="padding:10px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-3" style="padding:5px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-2" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:10px;color:white;">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
<div class="col-sm-1" style="padding: 5px 0px 0px 0px;color:white;">
</div>
<div class="col-sm-1" style="padding:10px;text-align:right;color:white;text-decoration:none;">
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<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 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Php code to list all the match sub folders -->
<div id="container">
<div class="sidebar">
</div>
<div class="body">
</div>
<div class="rhsbar1">
</div>
<div class="rhsbar2">
</div>
</div>
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >
</div>
</body>
</html>
Can someone help please?
This is because you are missing the bootstrap3 javascript library. Just add this library below your jQuery script tag
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Updated Fiddle
Related
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}
I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>
The dropup in my footer is not working. When I change dropup to dropdownit starts to work as a dropdown but I need a dropup.
I followed bootstrap's guidelines but it's not working.
Here is the code
<footer id="cartFooter">
<div class="row dropup">
<button class="btn footerDropup dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>PHONE<span class="text-right">$99.99</span></li>
<li>PLAN</li>
<li>ACCESSORIES</li>
<li>BUNDLE</li>
</ul>
</div>
<div class="row cartInfo">
<div class="col-xs-4">
<p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
</div>
<div class="col-xs-4 text-center">
<p>$99.99</p>
</div>
<div class="col-xs-4 text-right">
<p><a><span class="glyphicon glyphicon-trash"></span></a></p>
</div>
</div>
</footer>
Here is the css
#cartFooter{
position:fixed;
left:0px;
bottom:0px;
width:100%;
color: white;
height: 60px;
background:#000;
overflow: hidden;
}
.cartInfo{
padding-top: 10px;
}
.footerDropup{
width: 100%;
background-color: #212121!important;
color: #fff!important;
border-radius: 0;
font-size: 10px;
border: 0px solid transparent;
}
.footerDropup:hover{
background-color: #212121;
color: #fff!important;
}
.footerDropup:visited{
color: #fff;
}
Heres a link to the code pen
http://codepen.io/theMugician/pen/KdqNpj
Can you try this, run the code snippet to see the result
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link media="all" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
#cartFooter{
position:fixed;
left:0px;
bottom:0px;
width:100%;
color: white;
height: 30px;
background:#000;
overflow: hidden;
}
.cartInfo{
padding-top: 10px;
}
#divDropup{
position: fixed;
bottom: 30px;
width: 100%;
}
#divDropup button{
width: 100%;
background-color: #212121!important;
color: #fff!important;
}
#divDropup ul{
width: 100%;
background-color: #212121!important;
color: #fff!important;
text-align: center;
}
</style>
<body>
<div class="dropup" id="divDropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>PHONE<span class="text-right">$99.99</span></li>
<li>PLAN</li>
<li>ACCESSORIES</li>
<li>BUNDLE</li>
</ul>
</div>
<footer id="cartFooter">
<div class="row cartInfo">
<div class="col-xs-4">
<p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
</div>
<div class="col-xs-4 text-center">
<p>$99.99</p>
</div>
<div class="col-xs-4 text-right">
<p><a><span class="glyphicon glyphicon-trash"></span></a></p>
</div>
</div>
</footer>
</body>
</html>
Did you add the links to javascript libraries? Otherwise, dropdowns are not working.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
This is my entire HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body { background: url(img/dark.png) !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 515px; z-index:9999; position:relative; color:#FFCC00;}
#links {padding-top: 0.6cm;}
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<img src="img/iconf.png" class="img-responsive" style="max-width:180px">
</div>
<div class="col-md-4" align="right" id="links">
Read books
Play
Eat
Help
</div>
</div>
<div class="jumbotron" style="background: url('img/yellow.jpg')">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Eg: 'Fifty Shades of Gray'" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't know how to align the search box to the center of the page. I have tried adding align="center" in the input tag but it doesn't work. I saw a few examples where float:center property was being used but I don't understand where I should use it in my code. Please help. Thanks you.
Replace these lines -
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
by these lines -
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
You'll have your search box centered.
To understand how this is working, visit here - http://getbootstrap.com/css/#grid-offsetting