I am trying to change/remove the border radius of the navbar component. I tried the solution discussed here, How to remove the "border-radius" of the navbar-inverse in Bootstrap 3?.
I have created a fiddle at : https://jsfiddle.net/fts1b0z9/
HTML :
<!DOCTYPE html>
{% autoescape true %}
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "mainDiv">
<nav class="navbar navbar-inverse" style="border-radius:none !important">
<div class="container-fluid">
<div class="navbar-header" style="border-radius:none !important">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</div>
</body>
</html>
{% endautoescape %}
CSS:
.navbar-header{
color: #5e0231;
background-color: #5e0231;
}
.container-fluid{
color: #5e0231;
background-color: #5e0231;
width:1000px;
}
.mainDiv{
width:1000px;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
If you notice, the maroon color spills out of the border. I am not sure how to fix this.
It would be great if someone could help me fix this.
Thanks!!
The simplest:
.navbar-inverse {
border-radius: 0;
}
isn't working? Or it isn't what you mean?
Define your custom stylesheet after the bootstrap declaration.
.navbar {
border-radius: 0;
}
Related
I'm using React-Bootstrap and trying to accomplish this: transparent navbar
I want the navbar to be full width while the banner with image + text on top should be 80% and centered. I believe I can't make it the background image in this case, as I'm not sure how I'd make the container 80% width while keeping the navbar 100%.
For example this code also shrinks the menu:
<div className="jumbo">
<MyNavbar />
<h1>text</h1>
</div>
in style.css:
.jumbo {
background-image: url("img.jpg");
background-size: cover;
text-align: center;
width: 80%;
}
Considering I'm trying to make a responsive website, is it bad practice if I did something like this:
<MyNavbar />
<Image src="img.jpg" id="img">
in style.css:
#img {
top: -200px;
}
Is there an alternative? Thanks!
Try this.
#top-header {
background: rgba(255, 0, 0, 0.36);
position: fixed;
left: 0;
right: 0;
top: 0;
}
.w100 {
width:80%;
margin:0 auto;
}
<!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>Test Code!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bs-docs-nav navbar navbar-static-top" id="top-header">
<div class="container">
<div class="navbar-header">
<button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li class="active">
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
</nav>
</div>
</header>
<div class="page-inner">
<div class="img-section text-center">
<img src="http://getbootstrap.com/assets/brand/bootstrap-social.png" class="img-responisve w100">
</div>
</div>
<div class="container">
<h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
<p class="lead">Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools. </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You can make use of background-position and background-size to get the job done. You will have to style the text separately, so that the element and its text is centered.
.jumbo {
background-image: url("http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.navbar {
background-color: rgba(226, 183, 226, 0.5);
}
h1 {
text-align: center;
width: 80%;
/* margin:auto so that the div is centered */
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbo">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<h1>text</h1>
</div>
I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!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>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
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.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}
I am working on sticky footer. I have created html and css but css seems to be not working. can anyone let me know where I am going wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="C:\Users\Man\Desktop\testi.css">
<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>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TESTING</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Performance</li>
<li>Book Library</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p class="text-muted credit">Testing project Martin Bean </p>
</div>
</nav>
</div>
</body>
</html>
testi.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 260px;
background-color: #fdfdfd;
}
Are you using firefox, You need to change file path like this
<link rel="stylesheet" href="file:///C:/Users/Man/Desktop/testi.css">
I just started coding and i am building a Website with bootstrap. I want to create a simple Container (id="test") with a background image. I don't know why but i just does not set the background image and i am out of ideas. I am also using external CSS. I just found out that the collapse button is not working. Please help me fix those two Problems.
greetings,
Johannes Getzner
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-default">
<div id="container">
<div class="navbar-header">
<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 id="brand" class="navbar-brand">Example</a>
</div>
<div class="collapse navbar-collapse">
<ul id="listleft" class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul id="listright" class="nav navbar-nav navbar-right">
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="test">
</div>
</div>
</body>
</html>
CSS
#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 100%;
}
#test{background-image: url("background2.jpg");
}
Your css looks like it might be ok, but doesn't look like you're setting a height or width on that empty div. Probably you're getting a 0px by 0px empty div with the background of your image
The div with id="test" doesn't have any content; therefore it doesn't have a height. So whatever background you give it won't show up.
Solution: give the div a height in the css.
#test {
background-image: url("background2.jpg");
height: 100px; /* or whatever */
}
(or, put something in the div, like text or something.)
Change the order of style links in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
I'm trying to have a full width jumbotron with a background color. For some reason it is staying at the default layout with the gray background. I followed the code from the bootstrap website, so I don't know whats wrong.
In my index.html
<div class="jumbotron">
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
In my css:
.jumbotron {
position: relative;
background: #ff0000;
width: 100%;
height: 100%;
}
Seemed pretty straight forward...guess I was wrong.
DavidK, Hi there.
Here is a simple demo for you.
Using both ways to display the Jumbotron.
If you have a issue, and your custom css is not below the Bootstrap css link, then that could be your issue.
Use the FULL PAGE view to see it.
Or use this Fiddle.
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
}
.jumbotron {
background: #ff0000;
min-height: 25vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<div class="container bg-primary block">
...
</div>
</div>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
</div>
<!-- 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.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>