I would like to use a bootstrap modal as seen here:
http://getbootstrap.com/javascript/
In the example modals. However my site uses 0 bootstrap resources (.css or .js).
What is the simplest way i can go about adding bootstrap (both in UI and animation style) modals to my site?
Just extract the bits needed from bootstrap.js and .css that are needed? Just wondering if there are other options.
Thank you.
I think its better to use the minified versions of the .js and .css files from the bootstrap bundle rather than bits and pieces of the files.
You can download it from : https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip
Using modals is very simple after that: http://getbootstrap.com/javascript/#modals
Related
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.
what is the difference between bootstrap.min.css and bootstrap.min.js ?
Why bootstrap.min.js need to be included?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
and
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
They're both minified versions of the complete Bootstrap style (CSS) and components (JS). You don't need to include the JS to use the Bootstrap styles (responsive grid, buttons, tables, typography, panels, etc..).
However, you do need to include the JS if you want to use the Bootstrap JavaScript components (modal, carousel, data-attributes, scrollspy, tooltop, etc..).
Bootstrap.min.css contains the CSS necessary for the Bootstrap to work correctly.
Some of the functionality offered by the bootstrap aren't possible though using only plain .css and this is where javascript comes into play.
Bootstrap.min.js contains javascript code necessary for running Bootstrap.
.css is a stylesheet file and .js is javascript file
all javascript components of bootstrap are bundled into bootstrap.min.js
Well min.css obviously minifies the style for core bootstrap CSS while min.js minifies javascript modules. I think you should google some basic web tutorials before you start working with bootstrap.
You can need their own functions, check this: http://getbootstrap.com/javascript/
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.
I am using twitter bootstrap in my project and i am a beginner for bootstrap. I want to know that if i downloaded bootstrap.js and bootstrap.css and after that i want to use bootsrap js plugin like carousel, popover etc then i have to download a separate js file for each plugin or not ?
And if yes than is there any way to download a single bootstrap.js which cover all js plugins and boostrap.css which cover all js plugin css ?
you could do that either way
the generic bootstrap.js and bootstrap.css contains the entire bootstrap tools and widgets
Alternativly, you could create your own bootstrap with only the things you need on
http://getbootstrap.com/2.3.2/customize.html
and yes there is a way - http://www.bootstrapcdn.com/
2 lines of code and you got bootstrap
Plugins can be included individually (using Bootstrap's individual *.js
files, or all at once (using bootstrap.js or the minified bootstrap.min.js.
bootstrap.js includes them all. Why don't you check inside the file for its content?
You don't to download separate js file for each plugin. bootstrap.js and bootstrap.css are common files for all plugins.
I am developing a new web site, for which I installed the latest version of Joomla, 3.1.1.
I created a template from scratch, using the Twitter Bootstrap. I downloaded the latest version of Bootstrap, and loaded the related javascript in the index.php of my template.
While creating a carousel on one of my pages, I encountered a bug with the carousel indicators that were not reflecting the current picture. By investigating with Firebug, I realised that the bootstrap.min.js that was loaded on the page was not the one that I placed in /template/xxx/js, but another one in /media/jui/js, loaded by Joomla itself. And the one loaded by Joomla was an older version.
So I copied the latest version of bootstrap.min.js to /media/jui/js, and my carousel is now working perfectly. But (there is always a but), I now have some menus that don't work on the admin side of the site, using the default Isis template. If I put back the older version of bootstrap.min.js, they work again...
I would like to do one of these 2 things:
find a way to have Joomla load a different version of bootstrap.min.js for the admin side and the user side of the site
find a way to override the javascript loaded by Joomla from my template index.php
Any idea on how to achieve one or the other?
Thanks,
Patrick
Joomla ships with a slightly modified version of Bootstrap, so you cannot exchange it with a newer version.
The best thing for you to do is to find a version of that carousel script for the Bootstrap version shipped with Joomla. Otherwise you'll get problems on any update.
You can override the media by placing a file at templates/<your_template>/js/jui/bootstrap.min.js. But as warned by nibra, there are some modifications in the JS that you'll need to apply in your environment to keep things working. As well, you'd then be using a version of the JS that isn't intended for what we're shipping in the core currently.
So, it's possible to cleanly do it, but there's a fair amount of risk involved.
I found a solution that seems to be acceptable: I inserted a <script src=" line in the index.php of my template, to load the latest version of the bootstrap template.
As a result, both versions of the bootstrap javascript are loaded, but the most recently loaded is used, and my carousel is working.
I don't expect this to create problems with other modules in Joomla, as I use only basic ones or new modules that I created myself. In any case, the menu module of Joomla was not compatible with bootstrap navbar, and I had to add a few jQuery lines to add the needed classes.
Rgds,
Patrick
remove JHtml::_('bootstrap.framework'); from your index.php of your template and add any version of bootstrap you want manually, no big deal....except you prolly have to change your entire template markup...