When trying to adjust to Bootstrap 3, I have encountered the following problem.
When I click on the button named F, I would like Home and Not Home to show up, but it does not at the moment.
This is the video I am learning from.
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
<a class= "navbar-brand">Jackdh</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> F
</button>
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Not Home</li>
</ul>
</div>
</div>
</div>
I'm pretty sure that you simply forgot to add bootstrap.js and also jquery.
With that included, everything works for me.
#op (original poster)
Marcel's answer gave me a clue so I checked my script tag
<script src="bootstrap.min.js"></script>
I forgot to add the bootstrap javascript folder "js/"
With this script tag everything works fine.
<script src="js/bootstrap.min.js"></script>
# Marcel - I couldn't vote up your answer due to lack of reputaion!
You forgot to add navbar-header div after container, Try this one !
`
Brand
<button type="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>`
Related
I want to create a drop-down, But I am not sure it is a drop-down or something else coz I am new to HTML environment.
What I want to create is
When I clicked on the Indian Spices, It must show another dropdown inside it, and if I clicked on the Pepper in must show another two items under it.
Here each option should comes under it is parent.And drop-down must not have the borders around it .I need to design the drop-down as same as in the image .(Without any borders)
I have tried something here but I know it is not the proper way of design.
https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html
Here I almost near to my goal
https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html
Can anyone guide me to solve this ...
I think this is what you were looking for. You can do the rest bit of the designing yourself. Check the snippet.
$(document).ready(function () {
$('#head__top').on('click', function(){
if($('#innerCollapse').is(':visible')) {
$('#innerCollapse').hide();
}
});
$('#head__sub').on('click', function() {
$('#innerCollapse').fadeToggle(300);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<h4 id="head__top">
<a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
</h4>
<div class="collapse" id="collapseExample">
<h6 id="head__sub">
<a class="dropdown-item" role="button" aria-expanded="false"
aria-controls="innerCollapse">Pepper
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
aria-controls="innerCollapse" style="font-size:18px"></i></a>
</h6>
</div>
<div class="collapse col-sm-3" id="innerCollapse">
<h6>
<a class="dropdown-item">Black Pepper</a>
<a class="dropdown-item">White Pepper</a>
</h6>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
I'm just starting to refactor a site to use Bootstrap and I'm trying to get an image logo to be the first thing to the far left on the navbar and then next to it will be my menu. However using the code below it will display the logo where expected but the text "PBS" in the case is displayed below the image. Am I missing a css style? BTW, not sure if the server side hyperlink has anything to do with it but I'm using it because the homepage link will be different based on being logged in as a User or an Admin. I'm setting that link in the load of the masterpage.
<div class="navbar navbar-inverse navbar-fixed-top">
<div>
<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>
<asp:HyperLink ID="hlBrandLogo" CssClass="navbar-brand" runat="server"><img src="images/logo.png" /> PBS</asp:HyperLink>
</div>
Seems like you missed to make the both inline, It has nothing to do with bootstrap you can do it with below css
#hlBrandLogo
{
display:inline
}
img
{
float:left;
}
try this and for ref check, Hope this helps.
Bootstrap newbie here. I'm trying to break down my bootstrap template into multiple segments (i.e. title, footer, left nav, and main content) for re-usability and ease of updating.
The problem I have is when I try to import the external HTML file using the object tag, it messes up the CSS layout.
<object name="foo" type="text/html" data="title.html"/>
When I don't use the object tag, it displays fine. However, if I strip out the "container" div into "title.html" and link it back in using the object tag, it fails. Is there a way to prevent that?
Here's a sample and the screenshots on what I'm trying to do:
<body>
<!-- start: Header -->
<header class="navbar">
<div class="container">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".sidebar-nav.nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="main-menu-toggle" class="hidden-xs open">
<i class="fa fa-bars"></i></a>
<a class="navbar-brand col-lg-2 col-sm-1 col-xs-12" href="index.html">
<span>Home Portal Link</span></a>
</div>
</header>
</body>
Screenshot 1: Failed page when use object tag
Screenshot 2: Working page - not using the object tag
Any advice is appreciated!
Please refer to the code fragment below. It is a simple navbar.
Unfortunately, the collapse-toggle button appears above the brand (because it breaks the line, behaving like a block), what is unexpected. The expected behavior is that it appears beside. Further, if I try to float it with .navbar-right, it doesn't work. What could it be?
http://jsfiddle.net/X3pVX/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default btn-sm navbar-btn" data-toggle="collapse" data-target="#navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="#">Projeto Si</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<form class="navbar-form form-inline navbar-right">
<div class="input-group" style="max-width: 400px">
<input id="filter" class="form-control input-sm" type="text" placeholder="O que você está procurando?"/>
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></button>
</span>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Hey whats sup? I'm from Brazil too.
You only have the html file?
if yes you need to use css. never use style on html, HTML is for content and CSS for style.
create a css file and put the code below between the head tag.
<head>
<link rel="stylesheet" type="text/css" href="FileName.css" />
</head>
after that choose the class that you want to modify the position and try the code below
.navbar-right {
position:absolute;
left:150px;
}
try different pixels values and see which one works better for you.
If you don't know anything about css i recommend http://www.w3schools.com/
study there just for have a notion.