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.
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 know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
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.
i am working on helpdesk system and i am creating this system in mvc.
i am designing this system in bootstrap framework.i have created my master page with bootstrap template.
i am using bootstrap.min.css file for bootstrap design.
so my question is can i use my own css for my render body design and can i create my own css file and add those css class and so my website will be responsive ???
or should i have to write those css in bootstrap.min.css file.
but when i am adding my own css class in bootstrap.min.css then there is no effect of css.
can u guys me some suggestions please????????
you should write your own css and add link. don't change bootstrap.min.css.
and your site will be responsive
Bootstrap.min.css is only for the default styling of spans and rows using Bootstrap. You can and should write your own css file to override any of the basic styling, instead of modifying Bootstrap.min.css.
You can always use your own css independently of the css of the framework "bootstrap", of course.
Write the properties in the bootstrap.min.css is not well. It's more clean to write your property in a new css file or directly in the html tag of which you want add your property with the 'style' attribute.
Example :
<a style="text-decoration:none;color:red;">
Now, if you use your own property css, it can happen that some properties is applied to your component by default because you use bootstrap. To use your property value and not coming from 'bootstrap', you have to use "!important".
Example :
color : black !important;
Do not edit the bootstrap.min.css file. Use that as your base and then include your own CSS roles after it so that any changes you make will overwrite the bootstrap.min.css file leaving you with the code that you customized.