I am using bootstrap sass:
https://github.com/twbs/bootstrap-sass
but where is the boostrap-responsive.css file? I'm trying to add the classes row-fluid to make a layout as shown in this link, but no classes are being picked up.
jsfiddle.net/SxcqH/52/
As there is no bootstrap-responsive.css within Bootstrap 3.x, the .css is separated for each of the elements within the /assets/stylesheets/bootstrap folder, called and imported by the _bootstrap.scss.
Bootstrap 3.x has no "boostrap-responsive.css" file anymore.
All responsive classes are now being compiled into a single css file.
Bootstrap for Sass is currently based on Twitter Bootstrap 3.3.4.
See also this question.
Related
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
I have a project that I am trying integrate with the twitter bootstrap. I added the bootstrap-responsive.scss and use #import to add it. When I look at the compiled CSS file it shows the entire file but when I go to the HTML and add a class from the bootstrap like .span8 or something the element will not inherit those classes. They do not show when I inspect the element in chrome. Am I doing something wrong here? I figured I had acces to any classes that are in the bootstrap file when I imported it?
You need to add bootstrap and bootstrap-responsive. bootstrap-responsive on its own won't work.
How would I create a CSS ID #sidebar that is equal to span4? I mean I could do <div id="sidebar" class="span4">, but I would prefer to abstract that into #sidebar by not typing span4 and not have to specify width dimensions manually in #sidebar either.
Is that possible with just plain CSS?
Edit: Found a great article on this issue: Please stop embedding Bootstrap classes in your HTML
No it is not possible using only css.
Another solution is to make a custom build of bootstrap. You can add your a custom less style and build the bootstrap css from it.
ex
#sidebar {
.span4;
}
What you need to do is to
1. Clone the bootstrap repository
2. Add a custom.less files under less directory
3. Add custom.less file at the bottom of bootstrap.less file
4. Compile the bootstrap.less file with a tool like Cruch!
5. Instead of the default bootstrap.css file use the custom file
I downloaded a customized bootstrap CSS framework from this link
http://twitter.github.com/bootstrap/customize.html.
And I got only bootstrap.css and bootstrap.min.css files.
But as I am using responsive feature, I also need the customised version of bootstrap.responsive.css. How do I make the bootstrap.responsive.css work according to my new bootstrap.css.
PS: I have made 15 span columns and given new width for each.
Thank you.
Its all included in the single CSS file