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
Related
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 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.
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 8 years ago.
Improve this question
From my knowledge, there are 2 primary ways to insert images into HTMl.
You can either use the traditional image tag and add the image via the "src" attribute.
Or you can add the image as a background-image to a div tag via the background-image property.
Can someone explain some of the pros and cons of using either of these approaches? When would you use one or the other?
If your images are for designing reasons, your best of placing them as background. But when your images are part of your content, for example your website logo, or some illustration as an explanation to your text, you put it in with an img tag.
I would say use css to insert background images. From my experience it's more efficient and easier to read if you can keep all attributes of a div in one language. You can then edit them without switching screens in your editor, unless you plan to add some kind of user interface (javascript, jquery, etc.)
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 9 years ago.
Improve this question
Some people think both HTML <table>s and display:table should be used for tabular data exclusively.
I instead think that display:table doesn't have any implicit semantic meaning and that it can be used for layout / presentational purposes, as well as for displaying tabular data.
Is there anything wrong with using display:table for layout purposes? If so can you provide more details?
References to specifications etc. are welcome.
Yes. Markup is markup (and HTML is markup designed to convey semantics). Presentation is presentation.
When I need a shrink-to-fit block element that allows me to vertically center content, then I will use display: table and display: table-cell as needed.
I will not use a <table> to create a page size grid. Instead I will use a CSS framework like Twitter Bootstrap.
However, I will use a one-row/one-cell table is I need it to fix a centering problem that needs to work in older IE browsers that do not support CSS tables.
As a professional developer, I need to get the job done in a timely fashion and sometimes I will add extra mark-up if that what it takes to get the task finished.
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?