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
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
In my coding, I see the class navbar-fixed-top in Bootstrap v3.3.7.
Why the z-index = 1030?
The purpose of using z-index is for move the content in z-axis. Since you are using the navbar-fixed-top class, the header will always stick to the top of the page. But scrolling the page down will hide the header. In order to scroll the page content below header, z-index is used.
Bootstrap is a framework with MANY components that need to work together:
the modal should be over a component like a navbar, with the modal overlay in-between obviously
a tooltip should also display above any navbar, etc
These values are defined in less/variables.less.
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
Current v4 has them defined (in now default v4-beta branch on GitHub) in scss/_variables.scss
Trying to define them with magic values is a recipe for disaster, even in projects 10x smaller than a framework like BS: 2 months later a wild page appears with a case never seen before like a tooltip displaying above a submenu, etc. Having a convention applied by every person modifying the CSS is a must have (that includes "you lone developer" and "you lone developer in 2 months" ^^)
General note about Bootstrap: a LOT of things can be modified with this file alone, if you've the skills to recompile CSS with that Gulp workflow.
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
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
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?
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 7 years ago.
Improve this question
Although, I know that a lot may depend on a particular web site, what is the mainstream? =) And also, what do you think of implementing CSS table-based layouts while IE6 and 7 are in use?
I use CSS floating at the general level, tables for tabular data, and absolute positioning if necessary.
i personally use a mixture of them all. For grid like data, I favor tables. For advanced layering, I use absolute positioning.
For website layouts I use a mix of CSS layout techniques. Depending on whether I am building a fixed-width site or elastic-width site the CSS techniques differ somewhat.
But, when I want to create any layouts for e-mail marketing then table layouts is the only thing I work with. And now with Outlook 2010 still supporting the Word HTML Renderer I don't think I will be using any CSS layouts for e-mails anytime soon.
As for CSS table layouts, you can use conditional comments to provide a seperate CSS style sheet for IE 6 and 7. Something like this:
<!--[if lt IE 8]
//different style sheet goes here.
-->
I would recommend reading the following two books:
Bulletproof Web Design, Dan Cederholm
Everything you know about CSS is Wrong, Rachel Andrew & Kevin Yank
The first book will show you CSS layout techniques for both fixed and fluid designs, whereas the second one will provide information about CSS table layout, including how to deal with browsers that don't support it.
Hope this information is helpful.
Floating combined with absolute positioning.
I never use tables, perhaps mostly because I got tired of them back when I had to use them because there was no alternatives.
Tables are not semantically appropriate for making a layout. The "correct" way to do things isn't anything you said in particular.
You should be using semantically-appropriate tags: header tags for titles, div tags for sections, lists for navigation/lists, etc.
Once you have this set up, style the elements in CSS, adding divs, spans, ids, and classes as appropriate. Floats, absolute positioning, etc. should be used as you see fit.
Things are dependent.
I want to put is that you should know what is needed.
One thing Div based layout renders fast than table base. There are some things that might affect your page render time in browse Like use external CSS only etc.