Can I use 2 bootstrap css for 1 project
for example, my theme using botstrap 3.x
and I want to use botstrap 4.x in some div.
<div>
// using bootstrao 3.x
</div>
<div>
// using bootstrao 3.x
</div>
The best practice is to stick to particular bootstrap and use it throughout your project. As the functionality of every bootstrap differs from one another, it is not a good practice to use different bootstraps for 1 project.
Also, having 2 bootstraps in 1 project can result to conflicts because of many classes of the bootstrap library have the same name.
Related
I have a single page web application that still uses Bootstrap 3, which is getting rather annoying in parts. So I'd like to switch to Bootstrap 4, but not the entire application at once. I'd like to convert some parts of the application first, without disturbing other parts that still use Bootstrap 3.
The Bootstrap 3 CSS is added globally in the application right now. The parts I'd like to convert to Bootstrap 4 first are children of the main application, I can't cleanly separate the Bootstrap 3 and Bootstrap 4 parts into separate hierarchies just yet.
The problem is that I obviously can't just embed both stylesheets, as the selectors will conflict. I can think of some really ugly hacks to solve this like manually modifying all selectors for one of the Bootstrap versions, but that is not really something I would like to do unless absolutely necessary.
Is there a reasonable way to gradually migrate an application from Boostrap 3 to 4? Essentially some way to declare that Bootstrap 4 should be used inside a specific HTML element and all its children, with Bootstrap 3 being used outside of it?
You can add a namespace to one or both of the Bootstrap CSS files. For example, you could prefix all of your Bootstrap 4 class names with .bs4, so the .btn class would look like this:
.bs4 .btn {
display: inline-block;
font-weight: 400;
/*etc/*
}
Then on your page, wrap the content where you want to use Bootstrap 4 in a container with your namespace's class. E.g.
<div class="bs4">
<button class="btn btn-primary">Test</button>
</div>
It doesn't need to be as onerous to achieve this as it might sound. I followed the instructions on this page a while back to recompile the Bootstrap LESS files to add a prefix and it was pretty straightforward.
I stuck with some question. What the difference in the use of Boostrap 4 or Bootstrap UI(base on v4.0.0-alpha.6) powered by Angular in developing application on Angular 2 ?
Does BootstrapUI have some must have stuff that clear Bootstrap 4 doesn't have ?
Bootstrap UI isn't a straight wrapper for Bootstrap JS-based behavior, it's a rewrite of that behavior in Angular, so no Bootstrap or jQuery dependency, just the bootstrap-css-only node module, which is purely a copy of the Bootstrap CSS. Thus, if you are using Angular correctly, most of the Bootstrap components will not work. You will need to write your own directives to get them to work. So it may be easier to use Angular Bootstrap which does all the work for you (Source).
I was looking to find out what the equivalent of using multiple classes is in Twitter Bootstrap 2.3.2. Currently Joomla 3 does not come with the latest version of Bootstrap which allows you to write the following in order to tackle different viewports.
<div class="col-xs-12 col-md-8">
As i am new to bootstrap, I was wondering if I could do something similar using bootstrap 2.3.2 or is it best to target different viewports using media queries?
Apologies if its a simple question, but would like to know what can be made with the version I am using.
Thanks in advance
There is no way to use spanX classes like col-X-X classes natively.
But you can copy all CSS about col-X-X in Bootstrap 3, replace col with span in all selectors and use in your own CSS... I think should work.
In one of my old project I am using Bootstrap 2.2 .How to update the Bootstrap version to 3.4 without code change and I need new features in Bootstrap 3.2. How to use 2 versions of BS without any issue?
If your code isn't very complicated, give Bootstrap Upgrader a try, it works pretty decently on "vanilla" Bootstrap 2 sites. Bootply has its own tool as well, but in my own experience, BS Upgrader works better, at least until a few months ago when I used it fr the last time.
This being said, you'll need to take a look at the officila Bootstrap Migration Page to see what has changed, because it won't do you much benefit to migrate your site if you don't have any idea about what has changed
Updating your bootstrap is not generally encouraged. Many classes used in old bootstrap are not available in newer versions. You will need to change your HTML and CSS for the same.
For eg- Class for alignment in bootstrap 2.2 are named as span1, span2 and so on where as classes in bootstrap 3.2 for same purpose are named as col-md-1 , col-md-2 and so on for responsive grid structure.
Using new bootstrap can distort your current HTML structure and design also.
I am using Twitter Bootstrap 2 and thinking to migrate to the newer Bootstrap 3. However, I don't find the buttons in Version 3 as appealing as those from Version 2. Is there any simple way to use those nice buttons from v2 inside v3?
Yes, just include the bootstrap-theme[.min].css file that's an optional part of Bootstrap itself.
The Bootstrap Theme includes nice gradients etc. to make Bootstrap v3 look more skeuomorphic like Bootstrap v2. Here's the official example of it in action: http://getbootstrap.com/examples/theme/
Yes, exclude buttons and download bootstrap from http://getbootstrap.com/customize/ , you can then copy the btn sytles from bootstrap 2.x.x stylesheet and use those in your new website which uses bs3.