In using asp.net I have a scenario where the master page is implementing version 2.2 of BootStrap. But there is some content I'd like to use BootStrap 3.3 for. If I try and upgrade or implement 3.3 over 2.2 in any ways, it breaks some of my code. Any ideas for how to "selectively upgrade" HTML/BootStrap to say, everything that's inside a "Div" tag?
You can do'it realy easy by isolating Bootstrap with LESS, there is a good tuto to do this by "Chris Youderian".
https://formden.com/blog/isolate-bootstrap
Depends on how hacky you want to get. If it's just one feature, just copy the part of the .css from bootstrap 3.3 you want in its own css file and import this css file after the 2.2 version is loaded either in your build script or after your 2.2 version in your tag.
If you have a more specific question about which feature (if you're including js files as well) then we'll have to dig deeper.
Warning: You have to be careful with what you're overwriting from the 2.2 as it can break other css parts. And as #DavidG pointed out, I would avoid doing this entirely.
I needed to use use both bootstrap 3 and 4 on my project as a plugin which was written with bootstrap 3 looked terrible in bootstrap 4.
Tried to follow advice in the link shared in Hicham's answer. Couldn't get it to work. But following the cue, did some stuff manually and it worked. It took me 2hrs to finish step 4 though.
Steps:-
Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
Put it in custom css folder (or anywhere else) in your project.
Add its link in your header
(CAREFUL with this step) Prepend '.b3 ' without quotes to every selector in the downloaded bootstrap version using ctrl-H command. This will take a long time considering mistaken conversions. (e.g - Conversion of "ol" selector to ".b3 ol" results in conversion of the word "control" to "contr.b3 ol" which needs to be reversed.
Put all your contents which require bootstrap 3 inside a div tag with class="b3"
Done.
Related
I am using Bootstrap version 5 in my project. Recently in my program I needed my bootstrap table to be editable, meaning the user can change the values of the table cells as desired, the problem is that the x-editable feature Which is already usable in older versions of Bootstrap is not used in newer versions, what library or method do you suggest?
One of the ways is to install Bootstrap and look in the library to change what is desired but DO NOT change the bootstrap.css file. Instead make a new file that overrides and just in case make sure to put !important; at the end of all properties so it works. The reason why I don't suggest changing the bootstrap.css file is because core library files shouldn't be modified. The reason this is is because if you install the library again for some reason then your changes would be deleted.
If this is not what you want, I don't understand your questions.
Or try to add the contenteditable attribute and set it to true
I need to use a Bootstrap CSS in 4.6 as global level for every page, but on a section of one page, we need to use a 3rd party tool that uses Bootstrap CSS 3.7. Upgrading to 4.6 breaks the 3rd party tool.
Is it possible to make both versions coexist without affecting other sections of the page?
https://github.com/blueimp/jQuery-File-Upload
No, it is not possible.
Frameworks are consistent software that needs CSS + JS working together to get results.
In another hand, BS4 changes a lot against BS3.
So, the short answer is NO.
Right now I have an app which frontend is coded with Bootstrap 3 (I'm using bootstrap-rails gem). I would like to use also Materialize.css framework in the same app so I downloaded its stylesheet. My question is how to make these two frameworks play well together? I require Materialize.css stylesheet in my Application.scss file like so:
*= require 'materialize'
but current styles are seem to be mixed (I mean Bootstrap and Materialize.css styles try to override each other).
Is it even possible to make them work together or should I create different Application.html file for the parts I wanna use second CSS framework anyway?
Thanks in advance.
You mentioned that you are already using the bootstrap gem for your app, so you should ideally just cherry-pick the stuff you want from materialize, instead of importing the framework wholesale. Get the sass version of the framework, and import the parts you want.
I am using VS Express 2013, trying to customize a bootstrap theme for a Roadkill wiki. I'm trying to replace the body color with a background image.
It's easy enough to modify the bootstrap.css, but in order to get site updates you need to push changes into bootstrap.min.css. So far, I am only aware of how to do this manually. I'm looking for any method whereby I can just have the minified version update automatically.
I'm guessing it's probably really simple to do, but I can't find any steps on how to do this.
Just create your own css file and override just the css settings you want to change.
Be sure to load your override css after bootstrap so your overrides take precendence.
This way you dont need to edit either boostrap css at all.
You are right in that it is really easy to do: see http://cssminifier.com/. I just pasted in the entire text of my custom bootstrap file, clicked "Minify", and copied the output back to overwrite the content of bootstrap.min.css.
(I took a copy of the .min file first, just to be safe.)
In Visual Studio 2013, if you are using ASP.NET MVC (you haven't mentioned which, but I suspect you are using MVC 5 since you are working with Roadkill wiki), bundling and optimizations to CSS and JavaScript files are done automatically when enabled, since the NuGet package Microsoft ASP.NET Web Optimization is installed.
From Microsoft, how to enable/disable... refer to the middle of the article "Controlling Bundling and Minification":
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.