I made a simple responsive page using Twitter Bootstrap: http://jsfiddle.net/5YNmm/3/
The responsive Nav and any collapse toggles work only once in FF and Chrome.
In IE they work perfectly.
The collapse example is copied from the bootstrap site:
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Press me to toggle</button>
<div id="demo" class="collapse in"> Collapsible Content, initially shown </div>
Since i don't include any other js, it shouldn't be the error here Bootstrap nav-collapse toggles once or here twitter-bootstrap Collapse stops working after first click, where $.support.transition gets overridden by another library.
Many thanks in advance for any advice!
Its something in the css files. All I have simply done in this fiddle update is to remove your two css files (that obviously weren't loading on the fiddle)
<link rel="stylesheet" type="text/css" href="./bootstrap_files/stylesheet_427bb03fe1.css" media="all">
<link rel="stylesheet" type="text/css" href="./bootstrap_files/frontend.css" media="all">
and replace it with the bootstrap CDN hosted CSS file
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
and it collapses and expands on chrome and firefox fine now. Fiddle Link here: http://jsfiddle.net/5YNmm/6/
Without any access to the css files I couldn't tell you more - but hopefully this should point you in the right direction!!
Related
I have made a CodePen and tried using Bootstrap to make a collapse with a button. I have included the Bootstrap, JQuery, and Popper libraries. The CSS Bootstrap is working because my button is being styled, but when it is clicked it does not display the content. I will include a block of the code as well with a link to the full CodePen. Any suggestions on the project are welcomed as well, but I just really need to know why the collapse is not working. Thanks for reading, and I hope I can get this to work with yall's help!
Button:
<button
data-toggle="collapse"
data-target="#website-code-container"
type="button"
class="btn btn-primary"
>
Click Me to See the code used
</button>
Content to be displayed:
<div id="website-code-container" class="collapse"> ... </div>
Link to full CodePen, this will probably help more: CodePen
You have a problem with the Bootstrap CSS and the Popper JS libraries that you are importing.
Try importing the css from Bootstrap CDN listed at https://getbootstrap.com/
Don't forget to load jQuery before you load bootstrap.js
Here are the links to the CSS and JS for easier access
CSS only
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
You can find prior versions of the libraries at https://www.bootstrapcdn.com/legacy/bootstrap/
You are attempting to load files from a local drive. This will not work as filesystem access is not broadly allowed for security reasons.
Instead of these, include the relevant files in your CodePen or in another HTTP-accessible location:
<link type="text/css" rel="stylesheet" href="E:\Tech Page.css" />
<script src="E:\Tech Page.js"> </script>
I have found a code pen example of a card carousel that I want to use. However, the bootstrap stylesheet is making the carousel not work properly. When I remove the style sheet the carousel works but it changes the style of that page which I need it to be consistent with my other pages.
This is the code pen example I used for the carousel card. https://codepen.io/kreigd/pen/ybYNoN
I used codes exactly that is shown in the example in the link above
<!-- I can only keep the 2 style sheet below and maintain my personal styling
but the card carousel will not work-->
<link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- or I remove the 2 above and add this. This makes the card carousel
work but my personal styling will be changed and not consistent with my
other pages -->
<link rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/css/bootstrap.css'>
I would need help in allowing me to keep my original styling and at the same time get the carousel card to work.
Which ever is declared or called the latest, the style property depends on it. Some properties you have in <link href="bootstrap/css/bootstrap-grid.min.css" rel="stylesheet" /> and <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> will be the same as the on you're using for you Carousel.
There can be only one solution, either you have to provide the css properties that are meant for the carousel to work by picking them from the bootstrap or you've to delete the unnecessary properties from the carousel bootstrap which are affecting the main design of your page.
I have been developing basic website for a final year project, i added module popup but as soon as i started to add Bootstrap min.css files for my navigation bar jQuery is not working even though i have but it first the jQuery links before any other bootstrap links. if i removed the bootstrap.min.css link is working fine but i need for my navigation bar.
below is how i linked. am using version 3.3.7
<script src="Scripts22/jquery-1.8.2.js"></script>
<script src="Scripts22/bootstrap.js"></script>
<link href="css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
Below i have attached how it is function when all the links are there.
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
Having an issue where the collapsible nav menu button does not work at all on mobile browsers. It works perfectly fine in on desktop and have a sneaking suspicion it has to do with the parallax script that my client installed. Here is the page:
http://217.199.187.67/p11demo.com/
You are using the JS of bootstrap 3 and the responsive css of bootstrap 2
Css for Bs2
<link rel="stylesheet" href="/p11demo.com/templates/mikemc/css/bootstrap-responsive.css" type="text/css" media="all">
Js for Bs3
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>