I have added my own classes along bootstrap using backtick butt its not working.
e.g
<nav className=`navbar navbar-expand-lg navbar-light bg-light ${classes.navStyle}`></nav>
Here' the extra class(classes.navStyle) is not applied.
Kindly tells possible solution for (component-level-css) when using bootstrap in Reacjs Projects
Possible solution for component-level-css when using bootstrap in project
Related
How to add a specific class to a nav bar based on its component using angular 5
Basically, I'm trying to create an Angular 5 App. Now in this app, I've multiple components like HomeComponent, AboutComponent, ContactComponent. Now I want my nav bar's background completely transparent in the Home Component but black in other components.
I'm using bootstrap 4 also in this project. So in other components, I just want to add bg-primary class to my navbar and in the home component, I just want to remove that class and some CSS styles.
how can I achieve it?
Here is the code for my nav bar
<nav class="navbar navbar-expand-lg navbar-dark text-uppercase bg-primary w-100 position-fixed">
........
.......
</nav>
There might be a simple way of doing that. If you have a routerLink in your navbar that links to your home component you can use the routerLinkActive directive to find out if the route is active at the moment.
<a [routerLink]="['/home']" routerLinkActive #homeActive="routerLinkActive">
With the second part #homeActive="routerLinkActive" you define a template variable that will be either true or false, depending on if we are on the home route.
Then in your navbar you can use that variable to control the class.
<nav class="..." [class.bg-primary]="!homeActive">
The bg-primary class will be applied when the home route is not active.
If I'm not mistaken you have to make sure that your home route is something different than /, otherwise routerLinkActive will be true for every route.
See in the docs for more details about the directive.
In Bootstrap 3, the navbar-default class provided a linear-gradient background and a couple other nice touches. It seems to have been removed from Bootstrap 4 beta 2. Before re-creating the desired effect by hand I thought I might check here -- am I missing something?
Read the Bootstrap 4 docs.
http://getbootstrap.com/docs/4.0/components/navbar/#color-schemes
There is navbar-dark bg-primary, navbar-light bg-light, etc..
More info:
Bootstrap 4 navbar color
Bootstrap 4 custom navbar
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
Importing a css file in bootstrap react.
For navigation, an additional header.css file will be used.
In bootstrap without react I embed the file as follows:
<Nav class="navbar-abc-header navbar-default navbar-fixed-top">
In bootstrap react this entry does not work.
render ( ) {
return (
<Navbar navbar-abc-header fixedTop>
...
);
}
I can use <Navbar inverse fixedTop> but not my own css file.
As we the css file included right?
You need to use className in reactjs. class in a reserved keyword javascript hence you cannot use the same for defining CSS classes.
<Nav className="navbar-abc-header navbar-default navbar-fixed-top">
I've searched for answers on Zurb's site as well as other posts here on SO but haven't found anything that appears to address this issue.
I'm working with Foundation 6 (tried both sites and Zurb templates). Many of the utility classes are working such as top-bar, rows, large, small, medium-column, classes, etc. The default template works as well and shows the different callout elements, buttons, etc.
Some utility classes that were available in Foundation 5 aren't working in 6 such as text-left, text-right, float classes such as right and left or color classes such as white, black, etc. I'm sure there are others but these are the classes I've run across thus far.
I've checked app.scss to ensure nothing is commented out. I also checked the gulpfile.js and it's including all the assets, the SASS for foundation-sites and no javascript files are commented out.
For example, this code from the Zurb site, under v5.5.3 does not activate the panel class or the right or left floats in Foundation 6.
<div class="panel clearfix">
<a class="button right">Float Right</a>
<a class="button left">Float Left</a>
</div>
In my default.html layout, I have the following stylesheets:
<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">
and the following javascript files:
<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>
Am I missing a file reference, is there something else I can check to get these classes to work or are these utility classes no longer available in Foundation 6?
The answer apparently is some class names changed and others were possibly removed. Until there is updated F6 documentation outlining the classes, it'll require searching the css for classes that serve the purpose or adding custom classes.
EDIT: For further clarification, I found that the colors listed on this page - http://foundation.zurb.com/sites/docs/global.html, are referring to the colors used but the classes don't work.
For example, adding "alert" as a class to elements should color them red that's listed on the above-referenced page.
Their example, which adds "secondary" to the button element.
To color a component, add the name of the color as a class.
<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>
It doesn't change the color as ".secondary" is not a css class in Foundation 6. What I found by looking at the _settings.scss file is those are actually SASS global variables that are applied to different classes throughout. This is the same for .success and others. ".alert" is a class but only styled when applied in conjunction with other colors.
Looks like it's best to check the _settings.scss file if you're not finding the classes you're looking for or if something isn't working.