Tabset has been removed from ng-bootstrap version 8.0.0.
It is recommended to use Nav directives instead.
Nav does not appear to have a justify attribute or the equivalent functionality.
Has anyone figured out how to add the same justify functionality that was available with Tabsets (start, center, fill, justify, end)?
The ng-bootstrap Nav docs says:
It is up to you to specify the nav type using bootstrap standard .nav-tabs or .nav-pills classes. Otherwise active nav will not be highlighted, similarly to bootstrap.
So you should be able to use bootstrap flexbox utility classes like 'justify-content-start'.
Related
I'm developing a small control which is directly embedded in a parent page (without iFrame).
My control is written using react-bootstrap, so the bootstrap4 css is also embedded along with my control.
While developing my app as standalone, everything was fine.
After embedding it however, it turns out that there are some "global" bootstrap styles, such as the so called "list-styles" that don't get applied only on HTML elements having bootstrap classes, but instead on any matching HTML tag.
This causes the parent page's layout to get scrambled once my control is loaded.
Examples for bootstrap classes that are applied globally and which cause problems for me are styles like these which can be found in the bootstrap4 default css:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
or
label {
display: inline-block;
margin-bottom: .5rem;
}
This is very unfortunate for my use case. Is there a way for getting rid of any styles in bootstrap, which are not linked to any proper css bootstrap class? I don't want any styling of HTML tags that are not explicitly linked to a bootstrap class.
Thanks for your help.
I can think of three options, though I'm not sure they will do for you:
Paste Bootstrap's styles into a local file (instead of getting them from a CDN or something) and delete what you don't want (most of the unwanted styles should be at the top of the file)
Look for another, more minimal version of Bootstrap. I don't know if such versions/customizations exist but they very well might
Don't use Bootstrap. You can just as easily write your own css lines (personally I find that Bootstrap makes you lose control over your styling, but that's my opinion)
I'm working with Twitter Bootstrap 3.2.0 and I need to change the color of the "navbar" from basic black to another color. I've tried everything and I can't get it to change in CSS.
I have gotten it to work properly in an add-in that calls a CDN yet I need to control it myself in CSS.
I have properly loaded the bootstrap files in the proper order.
Does anyone have a method that will let me change this - either with a style sheet or in-line command.
Thanks very much!!!
Just go here: http://getbootstrap.com/customize/ and customize the navbar then download the customized Boostrap.
As long as you use the default navbar, it's as simple as to target the .navbar-default class, like this:
.navbar-default {
background-color: #FC0;
border-color: #E7E7E7;
}
And onbiously you can play with screen sizes, use different colors based on which page you are and so on
I made a Bootply to show you
How can I style my sub menu items? I have a custom made template, one module and one main menu, the sub menu items are all set as a child of the main menu.
My problem is that I don't know what to refer to when styling them. I could style all "nav-child unstyled small" or make classes using the li class number, i.e. ".item-134"
(I got these tags from the source code displayed by my browser).
Neither of these seem to be nice solution, is there any nicer way to do this?
David Fritsch is correct by using the menu-id classes to help select. Another alternative if you're worried about changing ID numbers is to use CSS3 nth-child selectors. You'll end up with something like:
.nav > li:nth-child(3) .nav-child {}
This will select the 3rd top-level item and then the child-items beneath it, and it's ID-free.
I'm trying to do a ul with each li having glyphicon-ok instead of the normal bullets.
Code I'm using is:
%li.glyphicon.glyphicon-ok ok sign?
Which is outputting the icon but the text is showing in (I'm guessing) times new roman. When I inspect the css it says the font is still 'Glyphicon'.
I've read HAML isn't ideal to use for formatting content, and I'm guessing this is why.
Any ideas as to what I need to use to get the text to respect my custom font but still retain the ability to use glyphicons?
Many thanks
Why are you writing text inside a li with a glyphicon-ok image as background? if you need a link or anything nest it inside glyphicon li like
%li.glyphicon.glyphicon-ok
%span your text
and then target inner span to use your custom css
or your can do other way around using li inside a span
%span.glyphicon.glyphicon-ok
%li your text
Is there a Wordpress WYSIWYG editor plugin to make a button for adding specific ul li and ol li styling?
e.g. currently my ul li list-style-type is set as square in my css and my ul li are numbers. My client want to be able to add roman and alphabet bullet points in the Visual side of the Wordpress WYSIWYG editor instead of having to manually code the list-style-type (upper-roman, upper-alpha) in the HTML side of the editor?
This tutorial will let you add the Styles dropdown in the WordPress editor: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/ (edit: the Method 2 described there)
As options of this dropdown, you should let your client add 2 different classes on ul element, for example alphabetical and roman. In the CSS file of your theme as well as in the editor-style.css mentioned in the tutorial, style these 2 classes as you want (ex: .roman { list-style-type: (...) })