I'm having trouble with multiple bootstrap in Twitter Bootstrap 3.
First Navbar is working ok with resizing and responsive.
Second navbar doesn't work properly in normal resolution, but when i try to do size to responsive and after resize it's working okay.
Here's some code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-static-top hr" style="background:black;">
<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>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item2</li>
<li class="divider-vertical"></li>
<li>Item3</li>
<li class="divider-vertical"></li>
<li>Item4</li>
<li class="divider-vertical"></li>
<li>Item</li>
<li class="divider-vertical"></li>
<li>Item6</li>
<li class="divider-vertical"></li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hr" style="background:#ececec; border-top:none; ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse2 collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>it1d</li>
<li class="divider-vertical"></li>
<li>it2d</li>
<li class="divider-vertical"></li>
<li>it3d</li>
<li class="divider-vertical"></li>
<li>it4d</li>
<li class="divider-vertical"></li>
<li>it5d</li>
<li class="divider-vertical"></li>
<li>it6d</li>
<li class="divider-vertical"></li>
<li>it7d</li>
</ul>
</div>
</div>
</div>
<!-- FOOTER -->
And Bootply:
http://bootply.com/101032
Best Regards and thanks for help.
Edit:
Ok I have resolution.
If you have same problem you have to change data target for second navbar and in starting div add ( i changed for .main-nav)
and after add your data-target class on the end of navbar item.
<div class="collapse navbar-collapse main-nav">
Here's link to bootply how to do it proper
http://bootply.com/101069
try changing
<div class="navbar-collapse2 collapse">
to that
<div class="navbar-collapse collapse">
If you add the following bit of CSS (either in a style tag or a custom css file), it should fix your problem.
#media only screen and (min-width: 768px) {
.navbar-collapse2.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0px;
overflow: visible !important;
}
}
I pulled this code from the code in bootstrap.css for .navbar-collapse
Related
I'm trying to set up a website grid in bootstrap. To clearify the end results I want I added an image. end results
I have standard bootstrap navbar in place. (is ok for now)
I want the columns to fill the complete height.
I want the "read more" button to overlap the columns underneath eachother.
The subtitle needs to be aligned to the left of the title. Now it's centered due to the whole div content is being centered.
Column height issue
So I have 2 columns side by side and 1 column underneath. I want it to fill up the height to 100%.
So let's say that the 2 columns side by side take up 80% of the height. (40% padding bottom and 40% top)
And the full width column to fill up the rest of the height. Say 10%/10% top/bottom padding.
However when I do this the height is more than the screen height and it's already out of the viewable area.
Overlapping button
As an extra headeache, I need 2 buttons that overlap 50% with the column underneath. I can't seem to get this to work.
The code I have in place now:
body {
font-family: Sofia-pro;
}
#header-block-left, #header-block-right {
text-align: center;
padding-top: 40%;
padding-bottom: 40%;
}
#page-scroll-anchor-grey {
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
}
#header-block-right {
background-color: #dcdbd7;
}
#page-scroll-anchor-grey {
background-color: #dcdbd7
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Code Atelier</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/png0dbx.css">
<link rel="stylesheet" type= "text/css" href="bootstrap.css">
<link rel="stylesheet" type= "text/css" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Oplossingen</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-6">
<div id="header-block-left">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
</div>
<div class="col-lg-6">
<div id="header-block-right">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
</div>
<div class="col-lg-12">
<div id="page-scroll-anchor-grey">
<h6>Scroll snel verder</h6>
</div>
</div>
<div class="row">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="" async defer></script>
</body>
</html>
Any suggestions would be great!
Use the vh unit to set the heights relative to the height of the screen.
You could set some min-heights on the nav/header and footer in order to ensure they hit a certain size and then switch the #main height to max-height to have it take up the rest of the vertical space on the screen.
nav {
height: 10vh;
background: grey;
}
#main {
height: 80vh;
}
#header-block-left {
background: white;
}
#header-block-right {
background: gray;
}
.btn {
position: relative;
top: -15px;
}
footer {
height: 10vh;
background: grey;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Oplossingen</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<section id="main" class="container-fluid">
<div class="row h-100">
<div class="col-6">
<div id="header-block-left" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
<button class="btn btn-primary mx-auto d-block">Text</button>
</div>
<div class="col-6">
<div id="header-block-right" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
<button class="btn btn-primary mx-auto d-block">Text</button>
</div>
</div>
</section>
<footer class="container-fluid d-flex justify-content-center align-items-center">
<p class="m-0">Text in the footer</p>
</footer>
I do not get to align the brand logo and the text and image icons to the navigation bar to use bootstrap enviroiment.
The problem is the logo is outside botton of the navigation bar and the icon not align with the text.
Please could you help me?
Te code is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Testing</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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="http://www.google.es"><img src="assets/images/brandlogo.png"/></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active marges-opciones-right" ><i class="material-icons" style="font-size: 40px">work</i> Page1<span class="sr-only">(current)</span></li>
<li class="text-options marges-opciones-right"><i class="material-icons" style="font-size: 40px">collections</i> Page2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 40px" >face</i><span class="username"> Username </span><i class="material-icons" style="font-size: 40px" >list</i></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon"></span><i class="material-icons">settings</i> preferències</li>
<li><span class="glyphicon"></span><i class="material-icons">lock</i> canviar password</li>
<li class="divider"></li>
<li><i class="material-icons" style="font-size:18px">power_settings_new</i> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The css is default of bootstrap.
Simply add these properties to align them in the same line:
.navbar-default .navbar-nav>li>a {
display: flex;
align-items: center;
justify-content: center;
}
Hope this helps,
I have tried numerous times to get Bootstrap to work, however even when I copy an example from Bootstrap's site, it still won't work properly as it does in the example. Here's the code I've uploaded to my server and yes, all the files are in the proper directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script> <![endif]-->
<!-- 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.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your classes were not correct.
You will have to make sure that since you are using a fixed-top navigation, you will want to put top margin or padding on items directly below them....
Here is a fiddle
<nav class="navbar navbar-inverse nav 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="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
I am newbie to bootstrap, trying to get a make a template.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Tech Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Top image is what i wanted, but, what i am getting is the below output,
As one can see in the image, the links are in the same line as the brand name, which i do not want, it should be in the next line.
Style like this.
<ul class="nav navbar-nav">
to
display:block;
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser