htmlangular
angular page content doesn't load
I am pretty new to angular and this is my first big project. I have a set of resources(images, js files, css file). I have different components which use them. However the page is not loading them. I am not able to figure out why. This is my index.html page:
<app-root></app-root>
<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>this is my app.component.html:
<router-outlet></router-outlet>This is the content of header.component.html:
<header id="header" class="header d-flex align-items-center fixed-top">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Index - Squadfree Bootstrap Template</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename">arandnetworks</h1>
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Deep Dropdown 1</a></li>
<li><a href="#">Deep Dropdown 2</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
</div>
</header>This is the content of the home.component.html:
<!doctype html>
<html lang="en">
<body class="index-page">
<main class="main">
<!-- Hero Section -->
<section id="hero" class="hero section accent-background">
<img src="assets/img/hero-bg.jpg" alt="" data-aos="fade-in">
<div class="container text-center" data-aos="fade-up" data-aos-delay="100">
<h2>Welcome to Squad</h2>
<p>We are team of talented designers making websites with Bootstrap</p>
<a href="#about" class="btn-scroll" title="Scroll Down"><i class="bi bi-chevron-down"></i></a>
</div>
</section><!-- /Hero Section -->
<!-- About Section -->
<section id="about" class="about section">
<div class="container">
<div class="row gy-5">
<div class="content col-xl-5 d-flex flex-column" data-aos="fade-up" data-aos-delay="100">
<h3>Voluptatem dignissimos provident quasi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit
</p>
<a href="#" class="about-btn align-self-center align-self-xl-start"><span>About us</span> <i class="bi bi-chevron-right"></i></a>
</div>
<div class="col-xl-7" data-aos="fade-up" data-aos-delay="200">
<div class="row gy-4">
<div class="col-md-6 icon-box position-relative">
<i class="bi bi-briefcase"></i>
<h4><a href="" class="stretched-link">Corporis voluptates sit</a></h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div><!-- Icon-Box -->
<div class="col-md-6 icon-box position-relative">
<i class="bi bi-gem"></i>
<h4><a href="" class="stretched-link">Ullamco laboris nisi</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div><!-- Icon-Box -->
<div class="col-md-6 icon-box position-relative">
<i class="bi bi-broadcast"></i>
<h4><a href="" class="stretched-link">Labore consequatur</a></h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div><!-- Icon-Box -->
<div class="col-md-6 icon-box position-relative">
<i class="bi bi-easel"></i>
<h4><a href="" class="stretched-link">Beatae veritatis</a></h4>
<p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
</div><!-- Icon-Box -->
</div>
</div>
</div>
</div>
</section><!-- /About Section -->
<!-- Services Section -->
<section id="services" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Services</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container">
<div class="row gy-4">
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
<div class="service-item position-relative">
<div class="icon"><i class="bi bi-activity icon"></i></div>
<h4><a href="service-details.html" class="stretched-link">Lorem Ipsum</a></h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
</div>
</div><!-- End Service Item -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
<div class="service-item position-relative">
<div class="icon"><i class="bi bi-bounding-box-circles icon"></i></div>
<h4><a href="service-details.html" class="stretched-link">Sed ut perspici</a></h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
</div>
</div><!-- End Service Item -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
<div class="service-item position-relative">
<div class="icon"><i class="bi bi-calendar4-week icon"></i></div>
<h4><a href="service-details.html" class="stretched-link">Magni Dolores</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div><!-- End Service Item -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
<div class="service-item position-relative">
<div class="icon"><i class="bi bi-broadcast icon"></i></div>
<h4><a href="service-details.html" class="stretched-link">Nemo Enim</a></h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
</div><!-- End Service Item -->
</div>
</div>
</section><!-- /Services Section -->
<!-- Stats Section -->
<section id="stats" class="stats section light-background">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-3 col-md-6">
<div class="stats-item">
<i class="bi bi-emoji-smile"></i>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
<p><strong>Happy Clients</strong> <span>consequuntur quae</span></p>
</div>
</div><!-- End Stats Item -->
<div class="col-lg-3 col-md-6">
<div class="stats-item">
<i class="bi bi-journal-richtext"></i>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span>
<p><strong>Projects</strong> <span>adipisci atque cum quia aut</span></p>
</div>
</div><!-- End Stats Item -->
<div class="col-lg-3 col-md-6">
<div class="stats-item">
<i class="bi bi-headset"></i>
<span data-purecounter-start="0" data-purecounter-end="1453" data-purecounter-duration="1" class="purecounter"></span>
<p><strong>Hours Of Support</strong> <span>aut commodi quaerat</span></p>
</div>
</div><!-- End Stats Item -->
<div class="col-lg-3 col-md-6">
<div class="stats-item">
<i class="bi bi-people"></i>
<span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1" class="purecounter"></span>
<p><strong>Hard Workers</strong> <span>rerum asperiores dolor</span></p>
</div>
</div><!-- End Stats Item -->
</div>
</div>
</section><!-- /Stats Section -->
<!-- Call To Action Section -->
<section id="call-to-action" class="call-to-action section accent-background">
<img src="assets/img/cta-bg.jpg" alt="">
<div class="container">
<div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
<div class="col-xl-10">
<div class="text-center">
<h3>Call To Action</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="cta-btn" href="#">Call To Action</a>
</div>
</div>
</div>
</div>
</section><!-- /Call To Action Section -->
<!-- Contact Section -->
<section id="contact" class="contact section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Contact</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-5">
<div class="info-wrap">
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
<i class="bi bi-geo-alt flex-shrink-0"></i>
<div>
<h3>Address</h3>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
</div><!-- End Info Item -->
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
<i class="bi bi-telephone flex-shrink-0"></i>
<div>
<h3>Call Us</h3>
<p>+1 5589 55488 55</p>
</div>
</div><!-- End Info Item -->
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
<i class="bi bi-envelope flex-shrink-0"></i>
<div>
<h3>Email Us</h3>
<p>[email protected]</p>
</div>
</div><!-- End Info Item -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48389.78314118045!2d-74.006138!3d40.710059!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1676961268712!5m2!1sen!2sus" frameborder="0" style="border:0; width: 100%; height: 270px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="col-lg-7">
<form action="../forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
<div class="row gy-4">
<div class="col-md-6">
<label for="name-field" class="pb-2">Your Name</label>
<input type="text" name="name" id="name-field" class="form-control" required="">
</div>
<div class="col-md-6">
<label for="email-field" class="pb-2">Your Email</label>
<input type="email" class="form-control" name="email" id="email-field" required="">
</div>
<div class="col-md-12">
<label for="subject-field" class="pb-2">Subject</label>
<input type="text" class="form-control" name="subject" id="subject-field" required="">
</div>
<div class="col-md-12">
<label for="message-field" class="pb-2">Message</label>
<textarea class="form-control" name="message" rows="10" id="message-field" required=""></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<button type="submit">Send Message</button>
</div>
</div>
</form>
</div><!-- End Contact Form -->
</div>
</div>
</section><!-- /Contact Section -->
</main>
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>This is the content of the footer.component.html:
<footer id="footer" class="footer dark-background">
<div class="container footer-top">
<div class="row gy-4">
<div class="col-lg-4 col-md-6 footer-about">
<a href="index.html" class="logo d-flex align-items-center">
<span class="sitename">test</span>
</a>
<div class="footer-contact pt-3">
<p>New York, NY 535022</p>
<p class="mt-3"><strong>Phone:</strong> <span>+1 5589 55488 55</span></p>
<p><strong>Email:</strong> <span>[email protected]</span></p>
</div>
<div class="social-links d-flex mt-4">
<a href=""><i class="bi bi-twitter-x"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-3 footer-links">
<h4>Useful Links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Terms of service</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 footer-links">
<h4>Our Services</h4>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Product Management</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 footer-newsletter">
<h4>Our Newsletter</h4>
<p>Subscribe to our newsletter and receive the latest news about our products and services!</p>
<form action="forms/newsletter.php" method="post" class="php-email-form">
<div class="newsletter-form"><input type="email" name="email"><input type="submit" value="Subscribe"></div>
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your subscription request has been sent. Thank you!</div>
</form>
</div>
</div>
</div>
<div class="container copyright text-center mt-4">
<p>© <span>Copyright</span> <strong class="px-1 sitename">Squadfree</strong> <span>All Rights Reserved</span></p>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer>this is the content of angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myfirstproject": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myfirstproject",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",myfirstproject
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "myfirstproject:build:production"
},
"development": {
"browserTarget": "myfirstproject:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "myfirstproject:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets/img/portfolio",
"src/assets/img/team",
"src/assets/img/testimonials"
],
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.mini.css",
"src/styles.css",
"src/assets/css/main.css",
"src/assets/vendor/bootstrap/css/bootstrap.min.css",
"src/assets/vendor/glightbox/css/glightbox.min.css",
"src/assets/vendor/swiper/swiper-bundle.min.css",
"src/assets/vendor/bootstrap-icons/bootstrap-icons.css",
"src/assets/vendor/aos/aos.css"
],
"scripts": [
"src/assets/js/main.js",
"src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
"src/assets/vendor/php-email-form/validate.js",
"src/assets/vendor/aos/aos.js",
"src/assets/vendor/purecounter/purecounter_vanilla.js",
"src/assets/vendor/glightbox/js/glightbox.min.js",
"src/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js",
"src/assets/vendor/isotope-layout/isotope.pkgd.min.js",
"src/assets/vendor/swiper/swiper-bundle.min.js"
]
}
}
}
}
}
}I want to add that inside the folder of each component I have an asset folder contenting the css files. I also have an asset folder just under src folder, > at the same level as app folder. I am not sure that this is the best structure but > I have been trying to have the asset at src/assets level but it did not work.
These are my ts file for the components above
// header.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: [
'./assets/vendor/swiper/swiper-bundle.min.css',
'./assets/vendor/bootstrap/css/bootstrap.min.css',
'./assets/vendor/bootstrap-icons/bootstrap-icons.css',
'./assets/vendor/aos/aos.css',
'./assets/vendor/glightbox/css/glightbox.min.css',
'./assets/css/main.css'
]
})
export class HeaderComponent {
headerLabels = ["Home","Contact"];
}
// footer.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: [
'./assets/vendor/swiper/swiper-bundle.min.css',
'./assets/vendor/bootstrap/css/bootstrap.min.css',
'./assets/vendor/bootstrap-icons/bootstrap-icons.css',
'./assets/vendor/aos/aos.css',
'./assets/vendor/glightbox/css/glightbox.min.css',
'./assets/css/main.css'
]
})
export class FooterComponent {
}
// home.component.ts
import { Component, EventEmitter, Input, Output, ViewEncapsulation,ViewChild, ContentChild, ElementRef } from '@angular/core';
import { UnlessDirective } from '../unless.directive';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./assets/vendor/swiper/swiper-bundle.min.css',
'./assets/vendor/bootstrap/css/bootstrap.min.css',
'./assets/vendor/bootstrap-icons/bootstrap-icons.css',
'./assets/vendor/aos/aos.css',
'./assets/vendor/glightbox/css/glightbox.min.css',
'./assets/css/main.css'],
encapsulation: ViewEncapsulation.None
})
export class HomeComponent {
@Input() lblHome: string = 'Home';
@Input() lblOurServices: string = 'Our Services';
@Input() lblContactUs: string = 'Contact us';
@Output() mouseOveronList = new EventEmitter<{}>();
testcustomdirective:boolean=false;
lblPage: string='hi';
displayPage= false;
lblCenterContent='r';
@ViewChild('userWish') userWishInput:any;
@ContentChild('contentParagraph')
paragraph!: ElementRef;
getHomeLabel(){
return this.lblHome;
}
getOurServicesLabel(){
return this.lblOurServices;
}
getContactUsLabel() {
return this.lblContactUs;
}
setHomeLabel(homeLabel:string){
this.lblHome = homeLabel;
}
setOurServicesLabel(ourServicesLabel:string){
this.lblOurServices = ourServicesLabel;
}
setContactUsLabel(contactUsLabel:string){
this.lblContactUs = contactUsLabel;
}
isFinalDesign(){
return false;
}
goToHome(page:string){
return this.lblPage=page;
}
onTextInput(event:Event){
this.lblPage= (<HTMLInputElement>event.target).value;
}
isToDisplay(){
this.displayPage= true;
}
}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Solution
app-root is the root of the Angular application, so anything outside this (like siblings) wont render since it's not inside the angular application, so move the Angular components inside AppComponent.
index.html
<app-root></app-root>
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
Then you need to render the components like Home inside Angular routing:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
...
{ path: '**', redirectTo: '', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
One more thing is you do not need to add the imports multiple times when the CSS is shared by all components. Go to angular.json and add these styles to styles array.
"options": {
...
"scripts": [],
"styles": [
'./node_modules/swiper/swiper-bundle.min.css',
'./node_modules/bootstrap/css/bootstrap.min.css',
'./node_modules/bootstrap-icons/bootstrap-icons.css',
'./assets/vendor/aos/aos.css',
'./assets/vendor/glightbox/css/glightbox.min.css',
'./assets/css/main.css'
],
"tsConfig": "tsconfig.app.json"
}
Standalone (new method) Routing Demo
Modular (old method) Routing Demo
After adding this, you can empty the styles array of your components, since it's already imported globally.
To save you time, directly install bootstrap using npm and reference them like shown above.
npm i bootstrap
- How to use "repeat()" css function combined with Angular ngStyle directive?
- When should I use a button (<button>) or a link (<a>) in HTML?
- angularjs code changes do not show up after browser refresh
- Why can't i unmute my HTML5 video with autoplay enabled?
- Difference between Localhost and opening html file
- Change html table color based on the value of a cell
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- How do I open a URL from C++?
- hover over image effect: shadow
- Indenting generated markup in Jekyll/Ruby
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How to make the Form elements work correctly when referencing in JS?
- What is the purpose of webkitRelativePath property in File object?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- How to overwrite css style
- How to create checkbox inside dropdown?
- How to focus on a form input text field on page load using jQuery?
- PHPMailer getOAuth2token response to div
- How do I setup a multi page app using vite?
- struts focus on field after validation without js
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- How to Display Image in Flask after a button is pressed
- What to use in place of ::ng-deep
- Div taking all horizontal space
- Html language in "less" style
- How to use index in @for in html angular 17
- In HTML, how do I put a heading inside a summary without the arrow appearing above the text or vanishing?