Stop the bootstrap or JavaScript file override - javascript

In my html page I added in the the cdn of bootstrap which I implemented for carousal only and in the bottom part of the my custom javascript file main.js for other dynamism but my javascript overrides the bootstrap.
Please what should I do to make both the bootstrap and my main.js file work together without any overriding the other?
I've tried placing the main.js file in the <head but no change was found.

Related

javascript and css loads but not working on navigation in React js

I am working in react js. I put all the assets links in public/index.html. When i start project, only first page works fine. When i navigate to other pages, all pages does not show the correct resul, and when i get back to first page it does not work. I checked the css and javascript files by ctrl+u. All files are loaded. The Both source files, before navigate and after navigate are same all files are loaded but on navigation it does not work. Please have a look on my index.html, how i use link tag to import css and javascript file. Any help would be appreciated.
Thank
I put all links to app.js and assets moved to src directory. Css files are working but jquery shows following error
import your CSS file in the "App.js" file. It'll work

Unable to run javascript for wordpress site using biz-news theme

I have a wordpress site that used the toivo-lite theme and was able to load a custom javascript by editing the header.php under the toivo-lite theme folder, and then invoking the JS function through the body onload in that header.php file. This worked like a charm.
Now this wordpress site has switched over to the biz-news theme, which in itself uses the agency-starter theme fwiu. I edited the header.php under the biz-news theme folder the same way I did for the toivo-lite theme, but it did not work. I also tried editing the header.php file under the agency-starter theme folder, but that did not work too.
I looked at the generated page but can not figure out what template / php file is being used in order to add my custom JS code. Any ideas?
Here are plugins that helps you
Insert Headers and Footers by WPBeginner this plugin allow to add script or html code insert after body
Show Current Template this plugin show all template file load on current page

Bootstrap 4 downloaded files not working. Am I missing something?

I've created a site with Bootstrap 4. I downloaded all the files necessary for Bootstrap to work, and for some strange reason, it's not working. When I use the CDN version of Bootstrap, everything works just fine. Am I missing something? You can view the site here.
This is my file structure for JS
This is my file structure for the CSS files
You seem to be including the Bootstrap CSS correctly using a relative path - css/bootstrap.min.css.
It appears you are using the CDN version of the Bootstrap JS and want to use the copy on your own server. You can include it in a similar way to that of the CSS above.
i.e.
<script src="js/bootstrap.min.js"></script>
If you have any further questions, comment below and I will help further.

ASP .Net MVC Web Application integrating bootstrap templates

I know I will probably get too many down votes for this question, but I just could not find a tutorial to my problem.
I have created a ASP .Net MVC project in Visual Studio 2013 (New Project -> ASP.NET Web Application -> MVC) and I am trying to change the default bootstrap for this project, I have downloaded bootstrap templates from different websites but I just can not use them in my project. I have followed a few questions on SO and some tutorials but all I could was change some styling, not entirely use the template I want to use.
Tutorial that I read:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5
SO Questions:
bootstrap 3 template change mvc5
Bootstrap Jumbotron not becoming full width of Body
After reading above questions and a few more tutorials here and there, I was able to change the theme but not the template, I want to use a parallax theme like this one
I copied the css into bootstrap.css, javascript into bootstrap.js and HTML into my page Home page but then _Layout.cshtml is messing up the display...
My Questions:
1.) Am I doing this the wrong way?
2.) What changes should I make to the _Layout.cshtml file to display the template properly?
3.) I read that there are different versions of bootstraps, the default version that is used in the project when I created it is V3.0.0 and some templates that I downloaded are V3.1.1, Will they be compatible? I followed this to upgrade the bootstrap version of my project to V3.1.1 after that some more .js and .css files were added to my project and things got more complicated.
4.) What will be the _Layout.cshtml file if I use bootstrap V3.0.2 ?
Any help will be appreciated...
EDIT:
I am trying to use this template:
Template
Template
Integrating Bootstrap Template into ASP .Net MVC 5:
First of all create a new Project:
Web Application -> MVC
Run your Project by pressing F5, it will look like:
Now check that your downloaded Bootstrap Template Folder contains following:
css (Folder):
bootstrap.css
bootstrap.min.css
js (Folder):
bootstrap.js
bootstrap.min.js
Note: Sometime bootstrap.css may be named as style.css and bootstrap.js may be named as style.js
You will be making changes to following files in ASP .Net MVC Project:
bootstrap.css
boostrap.min.css
bootstrap.js
bootstrap.min.js
Open your all the files mentioned above in code editor:
Now do the following:
Copy all of the code from bootstrap.css (Template css Folder) to bootstrap.css (Content Folder)
Copy all of the code from bootstrap.min.css (Template css Folder) to bootstrap.min.css (Content Folder)
Copy all of the code from bootstrap.js (Template js Folder) to bootstrap.js (Scripts Folder)
Copy all of the code from bootstrap.min.js (Template js Folder) to bootstrap.min.js (Scripts Folder)
Now its time to adjust your _Layout.cshtml according to the Theme. We will be splitting the index.html file from the Theme folder into two parts, one part will go into _Layout.cshtml and one part will go into 'Index.cshtml`:
Replace your _Layout.cshtml code with the code below:
_Layout.cshtml
Replace your Index.cshtml code with the code below:
Index.cshtml
Now run your Project it will be like:
Link
This is how I solved my problem.
Bootstrap is just the basis. A template may also add additional features in order to be rendered correctly. Things that may or may not be based upon bootstrap. It could also be an older version of Boostrap, or a newer as Boostratp has been at 3.2 for a while.
Usually, you include the main bootstrap.css first, then the css file(s) that the theme uses. Before you reference the bootstrap.js file, load jQuery. There is no set way to make your _layout.cshtml look good without
1) knowing what is wrong. We have to see the rendered code to really understand what is missing
2) What template you are attempting to apply since you may be missing the css or some elements that it uses.
There's a great and simple way to get everything you need to get going. Use Chrome and hit F12 to open the developer tools. Right-click over the area that displays the rendered layout and choose "Inspect Element". It will open the DOM for the entire page but will select an item within an iframe. Find the element immediately within the iframe and right-click and select "Copy as HTML". This will give you the layout as well as script css and script order.
The css that shows in the bootply editor window doesn't go into the bootstrap.css file. It's rendered inline into the code that I showed you how to get at but you can place it into it's own CSS file. Just make sure that CSS file is loaded after the bootstrap css file.
Just for reference, the template appears to be using Bootstrap 3.0.2, which isn't too old but isn't the most current.

Need to load bootstrap-dropdown.js after bootstrap.js to make dropdown work - why?

New to bootstrap and javascript and was trying to build a fairly minimal example of a dropdown menu. I am using bootstrap 2.3.2 which is the current version. My css and js are visible in my IDE. From the bootstrap docs it seems that a standard install of bootstrap.js contains bootstrap-dropdown.js and I can see it in the file. Yet, I need to have the following for the drop down menu to work:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
Why do I have to load bootstrap-dropdown.js separately if it is included in bootstrap.js? Obviously there is something fundamental here that I don't understand. Thanks.
From Bootstrap website :
Plugins can be included individually (though some have required
dependencies), or all at once. Both bootstrap.js and bootstrap.min.js
contain all plugins in a single file.
Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. you do not need the bootstrap-dropdown.js if you include bootstrap.min.js or bootstrap.js from the bootstrap page, check this overview on Bootstrap site. i can see that you are including both bootstrap.min.js and bootstrap.js but only one is enough.
Check the demo here, only using bootstrap.js.
Also, you can download a customized version from here, just according to your need you can add components/plugins and then download the custom build.

Categories

Resources