Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Firstly, I don't have much experience with Bootstrap and I just started my second Bootstrap project. Sometimes I confused about overriding CSS. It may spend more time to find out the style need to be changed rather than write from scratch. So I am thinking... how about taking out the bootstrap style?
For example, keep the markup structure, set the color background, font value to inherit, remove all shadows, gradients, border, border-radius etc.. Furthermore, build a reference in order to check the default value easily. Then we can just use the layout of Bootstrap but write our own style.
I prefer to not directly modify the Bootstrap source code. Use an extra CSS file is better to organise. It is also good to update Bootstrap.
By the way, I really miss the blankwork grid system, is it possible to add this feature into Bootstrap?
So, do you think this is a good idea or bad?
What you are looking for is possibly the customised version of bootstrap. See the details at http://twitter.github.io/bootstrap/customize.html. This will allow you to pick which elements of bootstrap framework you would like to use without adding the other parts. It also allows you to customise fonts and some basic shades and colours.
This can also be done via the less system - see http://bootstrap.lesscss.ru/less.html for information on how to do this.
And finally, if you are having trouble identifying which css is being applied to which element, have you tried using a browser debug tool such as Firebug in firefox?
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
TLDR;
Is it at all possible to use CSS's linear-gradient() function to fill SVG elements? Any ideas of workarounds are welcomed too.
Basically I'm trying to make a templating system for simple graphs using Mustache. The user (another developer) should be able to change the style of the graphs using CSS.
However I quickly found out that SVG's fill attribute is not happy with CSS's linear-gradient() function. fill: linear-gradient(#000, #FFF); simply makes both Chrome and Firefox complain with Invalid property value. This means that the user will have to change the SVG DOM and add a <linearGradient> element, then refer to it in fill, if said user wants any gradient effect.
This is indeed achievable within my current templating framework, but I would prefer not to change the DOM if at all possible.
Any ideas?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Essentially, I want to use the vertical timeline from CodyHouse in a project hosted on a Bootstrap template. I've migrated the HTML content, but the CSS files are causing issues. For example:
it distorts the navigation bar and header spacing
there should be a bounce animation for the elements of the timeline - no go.
I can't see any of the p text of the timeline
How can I edit/arrange the stylesheets appropriately so that the timeline inherits the font/background style of the Bootstrap but maintains the animation from CodyHouse?
Kinda hard to really pinpoint what your issues are with no code offered by you for inspection, but....
You'll really need to use your browser's inspect/page-debug functions on your page to see how both the bootstrap stylesheet and the vertical timeline's stylesheet are doing things to your page.
Bootstrap has it's own default color scheme, you can easily change it by just looking for the corresponding bootstrap elements and then overriding them in your custom stylesheet
If you're linking to three different styles sheets (boostrap, timeline, and your custom one), there can obviously be a conflict right there. Let's say on boostrap it's doing one thing to the nav bar and the top spacing, while your custom css is doing another thing and affect bottom spaces - see what I mean? You should really inspect those css files to see what they are affecting exactly.
Also, is the vertical timeline plugin you are using based on bootstrap 4? If it's built around bootstrap 3 that could be another issue as well. BS4 is still relatively new and many plugins that were based on BS3 may require further alteration.
Looking at the rules within styles.css ...you'll probably want to remove the generic rules - all those under 'Primary style' and then the first few under 'Resource style' where it makes reference to stuff within header{...}.
Also don't include the other stylesheets, reset.css and demo.css
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've seen many people suggesting setting *{ margin:0;padding:0;}. It does prevent lots of unexpected margin/padding on the page.
But if it's first thing we ought to implement every time we create a CSS file, why do the browsers bother to set default element margin/padding other than 0?
I guess giving a default margin makes sense to elements like <p> to keep the paragraph spacing. But again, if we are suggested to put the * reset every time, the browsers' default settings don't matter anyway, right?
There really is no exact answer to your question. But, the most logical reason to put a preset margin and padding is to most likely make webpages automatically more appealing to the user. If you see a website with text right up against the side of a page, it starts to look a little stretched and sketchy. So, to counter this, they set a margin and padding.
Bryce
A <h1> in example unfortunately has a browser-specific margins (see specific to the browsers). Setting margin/padding to 0px is a poor version of a normalizer that redesign all css to a clean cross-browser design from what you can start to write css that let the browsers render the same style.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am migrating my small business website to use bootstrap in order to be mobile friendly. I am still getting to know the bootstrap framework and I am not an expert in css either...
My question is a conceptual one. Today with my old website, using html and css, I define in my css both the size (yes, fixed sizes) and styles (colour, etc.) of the divs I use.
On the other hand, in all the examples I've seen of bootstrap, in the css one can only define the style of the divs, while the size is defined in the html when choosing the bootstrap column's size (e.g. col-sm-4). [Note: I am following the approach of having two css, bootstrap's and my custom one.]
The way I see it, I am losing the capacity to define the size of the divs centrally from the css and hence losing maintainability. Also, the site will be harder to develop since the col-sm-* classes are semantically poor. Is this correct? Am I missing something here?
Is there a way to define css classes that reference the bootstrap classes? e.g. To define a .menu css class that can behave as .col-sm-4.
Any suggestion or recommendation is welcome.
Thanks in advance
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Currently I am developing website themes with fixed width so please give me a suggestion which framework I should adopt is there any other way to do thing this way.
Thanks in advance.
I suggest you to use Bootstrap 3, it's used by a lot of developers and it's documentation is really helpful.
To learn responsive design better and fast you should:
Understand the use of media queries, this article will let you
know about the standards breakpoints for them.
You can use LESS or SASS for creating a custom Bootstrap grid
that suits your project.
As suggested above, frameworks such as Bootstrap really speed up the development time of a website and make adding responsive layouts easier due to the grid system they use. For extra information using bootstrap go to http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/. They provide some tips on responsive design.
For responsive website designing, you have to understand the css media queries. Though,it will get your job done, but designing through media queries seems like taking lots of efforts, specially when must faster and less time consuming alternatives are available.
I suggest you to go through twiiter bootstrap framework. Responsive website designing is much easier with it. You have to just include a couple of javascript files and apply some predefined classes(as per your need), and you are done.
There are two very good tutorials, i would like to mention. Just go through with them for a clear crisp understanding of bootstrap simplicity in responsive design. They have pretty good examples too. Just try altering your browser width to get a better understanding.
Bootstrap:
Link 1
Link 2
I would agree with using Boostrap 3 from personal experience.
Also instead of setting actual widths setting percentages instead makes it responsive as it goes to the size of whatever screen size you are using, as an example you can use this link.
Also, check out collapsing navbars for a responsive navigation to be collapsed on smaller devices, here is a link that will help you out: NAV.