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.
Related
I'm a really big fan of using angular material. However, a new project I'm working on doesn't use angular and I want some of the layout goodness.
For example:
<div flex="50"></div>
or
<div layout="column"></div>
I like being able to use these attributes to specify layout. Is there a smaller framework that I could use that provides these attribute selectors besides angular-material.css?
If you us angular but not angular-materil, a small option to enable flexbox is angular-flex
https://github.com/mogobruno/angular-flex
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
This question already has answers here:
Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
(3 answers)
Closed 8 years ago.
If we use bootstrap without a preprocessor we add classes into our opening tags like this:
<div id="El" class="col-md-1"></div>
I'm used to using bourbon neat with sass, in which case I can import mixins within the rules for my elements in sass. In which case I can do things like this:
#myEl
#import span-column(6)
Looking at the less documentation for bootstrap here: http://bootstrapdocs.com/v3.1.1/docs/css/#less it appears that there are no mixins available for bootstraps grid system. They've got convenience mixins for vendor prefixes, transitions, gradients and other things, but nothing for their own grid system.
So I've got a couple of questions:
How do I use less to define my grid using bootstrap?
And, if I want to do actually do this, am I working against the tool itself? I'm thinking that if using the less version of bootstrap this way isn't documented, then maybe there's good reason for it. Perhaps the less version of bootstrap just isn't supposed to be used this way and I should be using another set of tools instead?
You could do this, but you have to write just less. A good introduction to less is at their website: www.lesscss.org.
In your case you need:
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/theme.less';
#El {
.col-md-1;
}
Then you compile this file with lessc. After that, your #El-element will behave like a .col-md-1.
Intentionally, Bootstrap is meant to use with their css class and using their less-files is not the first way of bootstrap. But if you know bootstrap and less well, you shouldn't have problems. If you start fresh with bootstrap, I recommend that you use just their css.
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.
In our project we are using WIREFRAME( Base 16 columns) css framework, we want to change the framework to Bootstrap, IS there any easy way to change, or do we need to re write entire css again.
You shouldn't have to convert to Bootstrap unless there are particular styles that Bootstrap offers that Wirefy doesn't. Wirefy is meant to work as a foundation that you can build your entire app on. This means that you can include additional frameworks or stylized classes on top of it without having to convert.
If you still feel you need to convert then it really depends on the types of classes you've included into your wireframe and how they align with that of Bootstrap.