So I am using Bootstrap 3 that has not long been released. They changed the markup a bit in comparison to Bootstrap 2.xx.
Previously I asked the community on how I would center the buttons/links inside of a Boostrap navbar, and I was told that bootstrap offers a new class nav-justified. And when applied to a navbar it works brilliantly.
However my issue is that when I apply that it removes the style of a default the default look of bootstraps navbars. Sure it wouldn't be too hard to correct that with CSS but I'm wondering as to why just a center CSS class would remove the style of this?
Check out my Jsfiddle to get a more clearer view on what I mean
http://jsfiddle.net/MgcDU/6582/
Bootstrap 3 is still in RC1.
That means it's still on development and released for developers to be tested,you shouldn't download it unless you are a developer and a people who will help find bugs.
So what you need at the first is Bootstrap 2.3.2 because Bootstrap 3 was released at RC1 which means t's still on development and have alot of bugs...
I already try bootstrap 3 there was alot of bugs i guess you shouldn't use Bootstrap 3 First until it's completely released.
Related
I'm working with Macrowave Dreamweaver 8. I need to make display my website for all devices. I have an index.css witch contains desktop style, and an index_mobile.css that is the style sheet of mobile devices.
I used display:none to all div in index_mobile.css that aren't used on mobile version. Than in my index.htm i set:
#import url (LAYOUT/index.css);
#import url(LAYOUT/index_mobile.css);
but it didm't change nothing. What i missed?
The easiest and best way to do this is by using bootstrap. Take a look at the container rows and columns. Bootstrap is really easy to use and it will safe you a lot of time, it also comes with components that you can easily style by overwriting the bootstrap CSS with your own CSS.
Either use bootstrap 3 or the latest bootstrap 4 beta.
Get started with Bootstrap 4 beta
I'm using Bootstrap and Bootstrap Live Customizer to build a theme for a new site. One feature seems like it may be missing. I'm not sure how change the border width on any elements. Is there a way to change this globally, with or without Bootstrap Live Customizer? Or do I have to append my own CSS for this? Fairly new to Bootstrap, BTW.
I`ve been struggling with this issue for a while now, even my co-workers can't figure this out.
The live version of this app runs on Bootstrap 3 and my local version on Bootstrap 4, the HTML is exactly the same. The font on Bootstrap 4 looks so much blurry than Bootstrap 3. I`ve tried all kinds of font rendering styling, but none solved the problem.
Bootstrap 3
Bootstrap 4
You require a good pair of eyes to see the difference, but believe me, the difference is visible. Screenshots were made on the same screen.
Anyone an idea?
Thanks in advance!
Bootstrap 4 uses the system UI font.
Reference: https://github.com/twbs/bootstrap/pull/19098/commits/73e5e89e0efb938072ba3b1da5d06d0d0e659db9.
https://github.com/twbs/bootstrap/pull/19098
You might want to change back to the regular one if you think it's blurry.
You need to check for all the browsers (maybe it's just a browser thing)
Also you need to check your own css. However, have a look here: https://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
Seems to be only happening in Chrome. I guess I`ll have to deal with it. Thanks all!
I am trying to insert page-break-after:always; into the Print.css of a dynamic invoice.
The project is using Bootstrap 3, and I have been testing the printing on Chrome. In the invoice HTML I am using the bootstrap grid system, with bootstrap's 'hidden-print/visible-print'.
The issue I am having is: while using Bootstrap, Chrome is not recognising the page-break-after:always. I have read this is due to 'float:left' and many other factors, but after hours/days of tweaking them, it seems to make no difference. Print-break-inside:avoid; works fine.
I am curious if anyone else has encountered this recently, or if anyone with a superior knowledge of Bootstrap's inner-workings knows the root of this issue definitively?
It seems this is a ongoing problem, that Bootstrap knows about, and that may be fixed in Bootstrap 4. Until then I am stuck. I have no idea now how to achieve a print-break-after with dynamic content while using Bootstrap. Removing Bootstrap is not really an option due to the way the CSS is being loaded in my project.
Thanks in advance.
EDIT: Fixed
The only fix I found was to rebuild the layout by hand after setting:
float: none !important;
position: static !important;
in #media print.
This makes the Bootstrap col-* not work, but now the page breaks do. Pretty brutal fix but at least it worked. The 'row' class of bootstrap still works though, so there's that. Thanks for the help folks.
I want to change boostrap 3 navbar to collapse in bigger resolution (now is ~740 px width) and i want to change it to 940 px , how to do it ?
If you download the Bootstrap source, you can modify the LESS variables (in variables.less) and compile the LESS into CSS yourself. The variable you're looking for specifically is #screen-sm, which is 768 by default.
A similar post on SO (Bootstrap 3.0 Media queries), mentions using Boostrap's customize option to make changes like this without having to download the source (http://getbootstrap.com/customize/#variables-basics, then scroll down to "Media queries breakpoints"), but I can't actually change the variables within that page, so I think you'll need to use the source and compile to CSS yourself.
Another question on SO worth reading discusses some best practices for changing those variables without getting your copy of the Bootstrap source too far out of sync that it would be difficult to upgrade. The question deals specifically with Bootstrap 2, but I think it's still worth reading.
Twitter Bootstrap Customization Best Practices
Edit: Bootstrap's documentation suggests modifying the #grid-float-breakpoint variable. That would be a more specific change to the responsive settings than modifying #screen-sm. Bootstrap docs