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!
Related
I am running bootstrap on React, and then using Storybook to view it.
This is the code that I ran on Friday, and it was working without any problems. Today, I run it, and it's no longer working! I ran it on Jsfiddle and onecompiler, and still not working. I copied the carousel component from the bootstrap website, pasted it in my vscode, ran it, and it's not working! I pasted it in jsfiddle and onecompiler, and still not working! What is happening here? Why is it not working all of a sudden? Am I doing something wrong? By 'not working' I mean clicking on the left/right indicators does not move the slider!
Here's the code that I'm running:
<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
</div>
<div className="carousel-item">
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
I just copied it from bootstrap, and just replaced class with className to make it work on React, but it's not working. Everywhere is where it's supposed to be with the exception that indicators and controls do not work.
I feel like the issue has to do with me using normal bootstrap for React, rather than React Bootstrap, which does work! But normal bootstrap also worked on Friday, why is it not working now? And why is it not working in any online compiler either? Does it work for you? Am I missing something?
Try checking the following to find a possible resolution :
Check if you have provided link to bootstrap in index.html or alternatively have you correctly installed bootstrap using npm.
Have you installed or linked to the correct version of bootstrap for which you have taken the carousel.
In my opinion, rule of thumb to get through the styles in frontend is to inspect the elements and the console. Try checking if bootstrap styles are applied to the divs in the inspect element styles.
When adding an additional line of display in the header, the expanded header overlays the body. It doesn't seem that straightforward to compensate for this since the bootstrap does all of the styling behind the scenes.
This is the normal view:
When the expanded header is displayed, you can see a line of the body is overlaid.
In the second picture, a line of the body is overlaid. What do I need to do to compensate for the expanded header? I would like to be able to compensate for a variable sized header rather than just add < br/ > elements which will only work for a specific sized header.
Razor page code as requested in comment:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<div class="navbar-collapse collapse">
#<div Class="navbar-text navbar-left">
#Model.HelpTitle <br /> #Model.Message
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required:=False)
</body>
In the code above, the difference between a single line or double line display in the header is dependent on these 2 fields.
#Model.HelpTitle
#Model.Message
If there is no message, then there is a single line. If there is a message, then there are 2 lines and the header expands down into the body.
I don't understand the 2nd comment below to use relative position, so if someone could explain, that would be great.
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.
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>`