BriefNews | News & Magazine Bootstrap HTML Template

BriefNews is a modern Bootstrap 5 HTML template for news, magazine, and blog websites. Fully responsive, SEO-friendly, and ideal for publishers, media portals, and editorial websites.

Sass Installation

CSS preprocessor, streamlining and enhancing stylesheet creation, offering variables, nesting, and modular structure for efficient and maintainable code.

Read more about Sass at the official Sass web site: https://sass-lang.com/

There are several ways to install Sass in your system. There are many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. Some of these are free, but some are paid apps.

You can read more about them here: https://sass-lang.com/

sass source/stylesheets/index.scss build/stylesheets/index.css

If you use Node.js, you can also install Sass using npm by running

npm install -g sass

Layout

This layout utilizes semantic HTML5 elements to structure the webpage, enhancing accessibility, SEO, and maintainability.


<!-- begin::Meta Basic -->
<meta charset="utf-8">
<meta name="theme-color" content="#7126FB">
<meta name="robots" content="index, follow">
<meta name="author" content="LayoutDrop">
<meta name="format-detection" content="telephone=no">

<meta name="keywords" content="news template, magazine website, bootstrap 5 news template, newspaper HTML template, blog template, responsive news portal, online magazine, Bootstrap admin, HTML5 template, editorial website">
<meta name="description" content="BriefNews is a modern Bootstrap 5 HTML template for news, magazine, and blog websites. Fully responsive, SEO-friendly, and ideal for publishers, media portals, and editorial websites.">
<!-- end::Meta Basic -->

<!-- begin::Canonical & Language -->
<link rel="canonical" href="https://briefnews.layoutdrop.com/demo/"> 
<!-- end::Canonical & Language -->

<!-- begin::Meta Social -->
<meta property="og:url" content="https://briefnews.layoutdrop.com/demo/">
<meta property="og:site_name" content="BriefNews | News & Magazine Bootstrap HTML Template">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="BriefNews | News & Magazine Bootstrap HTML Template">
<meta property="og:description" content="BriefNews is a modern Bootstrap 5 HTML template for news, magazine, and blog websites. Fully responsive, SEO-friendly, and ideal for publishers, media portals, and editorial websites.">
<meta property="og:image" content="https://briefnews.layoutdrop.com/demo/preview.png">
<!-- end::Meta Social -->

<!-- begin::Meta Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://briefnews.layoutdrop.com/demo/">
<meta name="twitter:creator" content="@layoutdrop">
<meta name="twitter:title" content="BriefNews | News & Magazine Bootstrap HTML Template">
<meta name="twitter:description" content="BriefNews is a modern Bootstrap 5 HTML template for news, magazine, and blog websites. Fully responsive, SEO-friendly, and ideal for publishers, media portals, and editorial websites.">
<meta name="twitter:image" content="https://briefnews.layoutdrop.com/demo/preview.png">
<!-- end::Meta Twitter -->

<!-- begin::Page Title -->
<title>BriefNews | News & Magazine Bootstrap HTML Template</title>
<!-- end::Page Title -->

<!-- begin::Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end::Mobile Specific -->

<!-- begin::Favicons Icons -->
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon">
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
<!-- end::Favicons Icons -->

following main sections.


<!DOCTYPE html>
<html lang="en">
<head>
	
	.............
	
</head>
<body>
<div class="page-layout">
  
  <div class="custom-cursor">
    <div class="cursor-dot"></div>
    <div class="cursor-ring"></div>
  </div>
	
  <!-- begin::Page header that includes the logo, navigation, search and other information -->
  <header class="header">
  
  </header>
  <!-- end::Page header that includes the logo, navigation, search and other information -->
 
  <main class="app-wrapper">
	
    <section>
    
    </section>
    
    <section>
    
    </section>
    	
  </main>
	
  <!-- begin::Footer Section -->
  <footer class="footer">
	
  </footer>
  <!-- end::Footer Section -->
	
  <!-- begin::Back To Top -->
  <button class="back-to-top fa fa-chevron-up"></button>
  <!-- end::Back To Top -->
	
</div>
<!-- begin::Page Scripts -->
<script src="assets/libs/global/global.min.js"></script>
<script src="assets/js/slider.js"></script>
<script src="assets/js/main.js"></script>
<!-- end::Page Scripts -->
</body>
</html>

Folder Directories

This is the folder structure of BriefNews website which is very well organized.

├── src
│  ├── assets/
│  │   ├── css
│  │   ├── images
│  │   ├── js
│  │   ├── libs
│  │   ├── script
│  │   └── scss
│  │
│  ├── index.html
│  ├── index-2.html
│  ├── index-3.html
│  ├── index-4.html
│  ├── about-us.html
│  ├── archive.html
│  ├── bookmark.html
│  ├── category.html
│  ├── coming-soon.html
│  ├── contact-us.html
│  ├── error-404.html
│  ├── login.html
│  ├── register.html
│  ├── forgot-password.html
│  ├── post-details.html
│  ├── post-fullwidth.html
│  ├── post-overlay.html
│  ├── post-split.html
│  ├── post-standard.html
│  ├── post-table-contents.html
│  ├── search.html
│  ├── tag.html
│  ├── privacy-policy.html
│  └── terms-conditions.html
│
├── package.json
└── package-lock.json

Free Download Images

Free images have been used to create this website.

  • Pexels
    https://www.pexels.com

    Pexels is another excellent source for high-quality, free images and videos. They have a vast library with a variety of themes.

  • Pixabay
    https://pixabay.com/

    Pixabay provides a wide range of images, videos, and music for free download. They have a large collection and all assets are under a Creative Commons license.

Contact Form


<form class="ajax-form" action="assets/script/contact.php">
  <div class="ajax-message"></div>
  <div class="row">
	<div class="col-sm-6">
      <div class="mb-sm-30 mb-25">
      	<label for="labelContactFirstName" class="form-label">First Name</label>
      	<input type="text" class="form-control" id="labelContactFirstName" placeholder="e.g., Emily">
      </div>
	</div>
	<div class="col-sm-6">
      <div class="mb-sm-30 mb-25">
      	<label for="labelContactLastName" class="form-label">Last Name</label>
      	<input type="text" class="form-control" id="labelContactLastName" placeholder="e.g., Smith">
      </div>
	</div>
	<div class="col-sm-6">
      <div class="mb-sm-30 mb-25">
      	<label for="labelContactEmail" class="form-label">Email</label>
      	<input type="email" class="form-control" id="labelContactEmail" placeholder="hello@example.com">
      </div>
	</div>
	<div class="col-sm-6">
      <div class="mb-sm-30 mb-25">
      	<label for="labelContactSubject" class="form-label">Subject <span class="text-body">(Optional)</span></label>
      	<input type="text" class="form-control" id="labelContactSubject" placeholder="Topic">
      </div>
	</div>
	<div class="col-sm-12">
      <div class="mb-sm-30 mb-25">
      	<label for="labelContactMessage" class="form-label">Message</label>
      	<textarea class="form-control" rows="5" id="labelContactMessage" placeholder="Write your message here..."></textarea>
      </div>
	</div>
	<div class="col-sm-12">
	  <div class="mb-sm-30 mb-25">
	  	<button name="submit" type="submit" value="Submit" class="btn btn-primary btn-shadow btn-px">Submit</button>
	  </div>
	</div>
  </div>
</form>

3rd Party Plugins

Plugins and Frameworks used in Website Development

  • Bootstrap
    https://getbootstrap.com/

    Bootstrap is a powerful, feature-rich frontend toolkit. You can create anything from prototype to production in minutes

  • jQuery
    https://jquery.com/

    FontjQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

  • Swiper
    https://swiperjs.com/

    Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps.

  • Fontawesome
    https://fontawesome.com/icons

    Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

  • Magnific Popup
    https://dimsemenov.com/plugins/magnific-popup/

    Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

  • Line Awesome
    https://icons8.com/line-awesome

    Line Awesome is a beautiful icon library that offers clean, modern line-style icons — and it's a drop-in replacement for Font Awesome.

Change Log

Recent Changes Enhancements, Updates, and Important Information

18 September 2025
v1.0.0
  • Lunch website

Support & Contact

For any support queries, contact: