I just have installed Angular 10 with Angular Materials ng add #angular/material
There I choose the custom theme: Purple/Green
Next step was to simply add a Toolbar, basically copy paste from googles site. But I cannot arrange the buttons matching the theme. I have no idea why it looks like this.
how it should look
<mat-toolbar color="primary">
<button mat-icon-button aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="nav-spacer"></span>
<button mat-icon-button class="material-icons-outlined" aria-label="Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
my stlye.css
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
and these imports
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
FormsModule,
MatToolbarModule,
MatIconModule,
],
What do I miss here please?
You need to add MatButtonModule in your imports.
Related
I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
A link to codesandbox for better viewing
Here the code:
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:
<i className="fa fa-user"></i>
then the icon is rendered.
this works on me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>
I am making a bootstrap site for my sister and everytime i want to change css it works or 90% of the time it don't work.
I made a new file "style.css" to overwrite bootstrap i placed it under all the other tags in my and it still doesn't work can someone explain please?
Thanks
EDIT:
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
than i have in the bootstrap css file this line:
section{
padding: 6rem 0;
}
I want to change that to 9 rem so in my custom css file:
section{
padding: 9rem 0;
}
i does nothing ): and that is just one example maybe i do something very very stupid but i don't think so. and its not the cache.
head:
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- tab icon -->
<link rel="icon" href="img/logo_1.png">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Thanks
Maybe your webpage is still cached, try to hit ctrl + f5 to check if it is presesting.
Otherwise just use the !important keyword in your css styles. down below you will find an example of how to use an !important statement.
.row {
padding: 15px !important;
margin: 10px auto !important;
}
An important statement overwrites files even if they come after the execution stack of the dom.
Here is some more information of the usage : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
Edit:
Be aware that the import keyword is hard to work around with when you want to change this later, for your specific case it would be fine. But if it is for bigger clients and projects, watch your important keywords ;).
Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?
Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles
section {
padding: 9rem 0;
}
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i> Download Now!
</a>
</div>
</div>
</section>
My Navbar is not changing colour. Do I have the correct path to the Navbar.css file in the Navbar.jsx file?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-toggleable-md">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="container">
<Link className="navbar-brand" to="/">Aquastars New Website</Link>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Navbar;
Below is the structure of the app
below is the code for the .css file
.navbar-brand {
color: rgb(197, 21, 21);
}
a {
color: #aaa;
font-weight: 200;
}
below is what is in my header.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>React App</title>
</head>
I'm still learning React but you may want to try import * as styles from './styles.css', and to use that specific class, className={styles.yourClass}
I managed to solve it by restarting the server. For some reason, the changes were not carried over from the CSS file. So I controlled C to stop the server and the restarted it again.
npm start
I tried to ignore default <a></a> tag of bootstrap (dark sky color) to make my text appear as normal.
My text is wrapped by <a> tag and <span> tag, therefore the default style of <a> tag is applied as default.
<a href="#">
<span class="text-bg"><strong>0</strong></span><br>
<span class="text-xs">NEW(999)</span>
</a>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<span class="text-bg"><strong>0</strong></span><br>
<span class="text-xs">NEW(999)</span>
</a>
I understand that set manually set style would be fine, however, it would be less painful to pass by <a> tag style and get the normal text color (gray color) instead.
Is there any way I could achieve that? Thanks.
You can strictly overwrite the user agent stylesheet at once.
This Could be the solution. See the Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
a:-webkit-any-link {
color: -webkit-link !important;
cursor: auto !important;
text-decoration: underline !important;
}
a{
color: -webkit-link !important;
cursor: auto !important;
text-decoration: underline !important;
}
</style>
</head>
<body>
<a href="#">
<span class="text-bg"><strong>0</strong></span><br>
<span class="text-xs">NEW(999)</span>
</a>
</body>
</html>
I am using the Bootstrap framework with SB Admin 2 theme for an application, having some buttons, eg:
<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>
This is, how they should be displayed (and actually are in Firefox) with correct text alignment (sorry, I cannot post images yet):
http://i123.photobucket.com/albums/o308/spinfun/firefox2.jpg
This is, what Chrome displays:
http://i123.photobucket.com/albums/o308/spinfun/chrome2.jpg
So my question is: How can I make Chrome display those buttons with horizontally centered text?
EDIT: I have setup a real basic page with just those 3 buttons.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- custom CSS SB Admin-->
<link rel="stylesheet" href="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css">
</head>
<body>
<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- SB Admin Theme -->
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
</body>
</html>
The button texts are simply not displayed horizonztally centered in Chrome on each of the computers I use.
Without the SB Admin css the alignment is correct, but the buttons of course are not circular. So the problem has to be somewhere within the SB Admin stuff.
You will need to overwrite this class into your custom CSS file.
CSS
.btn-circle.btn-xl {
padding: 10px 0;
}
SB Admin v2.0 theme has some predefined CSS which is causing the problem.
following class is having padding: 10px 16px; into its sb-admin-2.css file
.btn-circle.btn-xl {
padding: 10px 16px;
}