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.
Related
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.
I am trying to use Bootstrap in React. Bootstrap button and grid are working but CSS for bootstrap is not showing up. Are there any steps to add bootstrap CSS separately?
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that u get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. Hovewr if you are only interested in css, then its perfect.
Using this u can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If u want simple setup , then u can use reactstrap link
Other frameworks include react-bootstrap link
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).
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 have a twitter bootstrap web template that I'm integrating with angular ui to develop a SPA. I have been able to do this integration to some level but I want to override the default css that Twitter Boostrap dropdown-men with Angular JS provides. Thanks for any help.
Option 1) Edit the Bootstrap CSS
You can edit the bootstrap CSS but this means you are assuming all risk for integrating nay future bootstrap changes. I don't recommend it unless you want to trim out all bootstrap CSS except what you need. Only mentioning it because it is an option, though not one I recommend.
Option 2) Create your own CSS to override Bootstrap's CSS
Create a CSS file such as styles.css and have it listed after bootstrap's CSS in your HTML file. Then override the styles for what you need. This is pretty easy and allows you to leave Bootstrap untouched.
Option 3) Pay a CSS expert :)
OK, so seriously ... choose option 2.