📖 Introduction
Thank you for purchasing bittoNews! This is a modern, responsive, and feature-rich Bootstrap 5 HTML template designed specifically for news portals, magazines, blogs, and online newspapers. Built with clean code and best practices, bittoNews provides everything you need to create a professional news website.
- Template Name: bittoNews
- Version: 1.0
- Author: RedoHub
- Framework: Bootstrap 5.2
- License: ThemeForest Regular or Extended License (based on purchase)
🎯 What's Included
- Multiple HTML pages (Home, Country, International, Space, Tech, Health, Entertainment, Sports, Details, About, Contact)
- Fully responsive design that works on all devices
- Clean and well-commented code
- Bootstrap 5.2 framework
- Font Awesome icons
- Easy to customize
- Cross-browser compatible
- SEO optimized structure
- Comprehensive documentation
✨ Features
📱 Fully Responsive
Perfect display on all screen sizes - desktop, tablet, and mobile devices.
🎨 Bootstrap 5.2
Built with the latest Bootstrap framework for modern design and functionality.
⚡ Fast Loading
Optimized code and assets for quick page load times.
🔧 Easy Customization
Well-organized code structure makes customization simple and straightforward.
🌐 Cross-Browser
Compatible with all modern browsers including Chrome, Firefox, Safari, and Edge.
🔍 SEO Friendly
Semantic HTML5 structure optimized for search engines.
📰 Multiple Layouts
Various news section layouts and article display options.
🎯 Clean Code
Well-commented and organized code following best practices.
🌍 Multi-Language Ready
Language dropdown included for easy internationalization.
📢 Breaking News Ticker
Animated breaking news ticker for important updates.
🎭 Font Awesome Icons
Includes Font Awesome icon library for rich visual elements.
📊 Ad Spaces
Pre-built advertisement placement areas throughout the template.
🛠️ Technical Specifications
| Technology | Version/Details |
|---|---|
| HTML | HTML5 (Semantic Markup) |
| CSS | CSS3 with custom styles |
| Bootstrap | Version 5.2 |
| Font Awesome | Free Version 7.1.0 |
| JavaScript | Vanilla JS + Bootstrap Bundle |
🚀 Installation & Setup
Step 1: Extract Files
After downloading the template package, extract the ZIP file to your preferred location. You'll see a folder structure containing all necessary files.
Step 2: Upload Files
Upload all extracted files to your web server using FTP/SFTP client or your hosting control panel's file manager. Make sure to maintain the folder structure exactly as shown.
assets/css/- All CSS filesassets/js/- All JavaScript filesassets/images/- All image filesassets/webfonts/- Font Awesome font files- All HTML files in root directory
documentation/- Documentation folder (separate from main files)
Step 3: Open in Browser
Navigate to your website URL in a web browser. If you're working locally, you can use:
- XAMPP, WAMP, or MAMP for local server
- Live Server extension in VS Code
- Simply open index.html in your browser (some features may not work)
Accessing Documentation:
To view this documentation file:
- Online: Navigate to
yourdomain.com/documentation/ - Local Server: Navigate to
http://localhost/bittoNews/documentation/ - Direct File: Open
documentation/index.htmlin your browser
Local Development Setup
For local development, we recommend using a local server. Here's how:
Option 1: Using VS Code Live Server
- Install Visual Studio Code
- Install "Live Server" extension
- Right-click on index.html and select "Open with Live Server"
Option 2: Using XAMPP
- Download and install XAMPP
- Copy the bittoNews folder to
C:\xampp\htdocs\(Windows) or/Applications/XAMPP/htdocs/(Mac) - Start Apache server from XAMPP control panel
- Open browser and navigate to
http://localhost/bittoNews/ - To view documentation:
http://localhost/bittoNews/documentation/
📁 File Structure
Understanding the file structure will help you navigate and customize the template efficiently.
- bittoNews/
- assets/
- css/
- bootstrap.min.css
- fontawesome.min.css
- style.css (Main custom styles)
- js/
- bootstrap.bundle.min.js
- main.js (Custom JavaScript)
- images/
- logo.png
- logo-small.png
- bitto-news.jpg
- advertisement.jpg
- advertisement-large.jpg
- avator.png
- webfonts/ (Font Awesome fonts)
- css/
- index.html (Homepage)
- country.html
- international.html
- space.html
- tech.html
- health.html
- entertainment.html
- sports.html
- details.html
- about.html
- contact.html
- privacy-policy.html
- tnc.html
- favicon.ico
- favicon-16x16.png
- favicon-32x32.png
- documentation/
- assets/
- css/
- style.css (Custom CSS)
- js/
- main.js (Custom JavaScript)
- index.html
- assets/
- assets/
📄 File Descriptions
documentation/ folder at the root level. This keeps documentation separate from
your main template files for better organization.
| File/Folder | Description |
|---|---|
| style.css | Main stylesheet containing all custom styles for the template |
| main.js | Custom JavaScript for sticky navbar, breaking news ticker, and other interactions |
| bootstrap.min.css | Bootstrap 5.2 framework styles (minified) |
| bootstrap.bundle.min.js | Bootstrap JavaScript with Popper.js included |
| fontawesome.min.css | Font Awesome icon library styles |
| index.html | Main homepage with all news sections |
| details.html | News article detail page template |
| Category Pages | Individual pages for different news categories (country, international, tech, etc.) - all follow same structure |
| assets/webfonts/ | Font Awesome icon font files (automatically loaded by fontawesome.min.css) |
🎨 Customization Guide
1. Changing Colors
The template uses a primary red color scheme. To change colors, open
assets/css/style.css
and modify these values:
/* Primary Color - Red */
#f52225 /* Main brand color */
/* Replace all instances with your desired color */
/* Example: Change to blue */
#3498db /* New blue color */Key color variables to change:
.card-title- Card title colors.navbar-light .navbar-nav .nav-link:hover- Navigation hover color.navbar-light .navbar-nav .active .nav-link- Active menu color.language-btn- Language button border#top-section h3, #top-section h5- Section heading colors
2. Changing Logo
Replace the logo images in assets/images/ folder:
- logo.png - Main logo (recommended size: 200x40px)
- logo-small.png - Small logo for tablets (recommended size: 150x40px)
3. Modifying Typography
The template uses "Segoe UI" as the primary font. To change it:
/* In style.css */
body {
font-family: "Your Font", Arial, sans-serif;
font-size: 16px;
}For Google Fonts:
- Go to Google Fonts
- Select your desired font
- Copy the link tag and paste in your HTML
<head> - Update the font-family in CSS
4. Customizing Navigation Menu
To add/remove menu items, edit the navbar section in your HTML files:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="your-page.html">Your Page</a>
</li>
<!-- Add more items -->
</ul>5. Adding New Pages
To create a new page:
- Duplicate an existing HTML file (e.g.,
country.html) - Rename it to your desired page name
- Update the
<title>tag - Update the active menu class in navigation
- Modify the content sections as needed
- Add link to navigation menu
6. Modifying Breaking News Ticker
Edit the breaking news content in your HTML:
<div class="breaking-news-ticker">
<span class="breaking-news-content">
Your breaking news text here | Another news
</span>
</div>To disable auto-scroll, remove the scroll class from the span element.
7. Advertisement Spaces
The template includes multiple ad spaces. Replace the placeholder images:
<!-- Large Advertisement (728x90 or 970x250) -->
<img src="assets/images/advertisement-large.jpg" alt="Ad">
<!-- Sidebar Advertisement (300x250) -->
<img src="assets/images/advertisement.jpg" alt="Ad">8. Social Media Links
Update social media links in the footer section:
<li>
<a href="https://youtube.com/yourchannel" class="text-decoration-none">
<i class="fa-brands fa-youtube"></i> YouTube
</a>
</li>9. Contact Information
Update contact details in the footer:
<li>
<a href="javascript:void(0)">
<i class="fa-solid fa-location-dot"></i>
Your Address Here
</a>
</li>
<li>
<a href="mailto:your@email.com">
<i class="fa-regular fa-envelope-open"></i>
your@email.com
</a>
</li>10. Meta Tags & SEO
Update meta tags in each HTML file's <head> section:
<title>Your Site Title</title>
<meta name="description" content="Your site description">
<meta name="keywords" content="your, keywords, here">
<meta property="og:title" content="Your Site Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="your-image.jpg">📄 Pages Overview
1. Homepage (index.html)
The main landing page featuring:
- Breaking news ticker
- Featured latest news section
- Multiple category sections (Country, International, Space, Tech, Health, Entertainment, Sports)
- Sidebar with recent posts and advertisements
- Large advertisement spaces between sections
2. Category Pages
Individual pages for each news category with consistent layout:
- country.html - Country/local news with featured article and news grid
- international.html - International news section
- space.html - Space and astronomy news
- tech.html - Technology news and updates
- health.html - Health and wellness news
- entertainment.html - Entertainment news and celebrity updates
- sports.html - Sports news and results
Category Page Structure:
Each category page includes:
- Navigation menu with active state on current category
- Large advertisement space at top
- Featured article section (8-column layout) with large image and full description
- Recent posts sidebar (4-column layout) with thumbnail images
- Advertisement in sidebar
- Multiple news cards in 3-column grid layout (15 cards showing pagination-ready structure)
- Full footer with links and contact information
3. Details Page (details.html)
Template for individual news article pages featuring:
- Author information with avatar
- Publication date and time
- Social sharing buttons
- Featured image
- Article content area
- In-article advertisement placement
- Related news section
4. About Us (about.html)
About page for your organization/website information.
5. Contact Us (contact.html)
Contact page with contact form and information.
6. Privacy Policy & Terms (privacy-policy.html, tnc.html)
Legal pages for privacy policy and terms & conditions.
Making All Pages Dynamic
To connect your pages with a backend/CMS (if needed in future):
- Choose your backend technology (PHP, Node.js, Python, etc.)
- Convert HTML files to your template engine (Blade, EJS, Jinja2, etc.)
- Replace static content with dynamic variables
- Connect to your database
- Implement CRUD operations for news articles
🧩 Components & Elements
1. Navigation Bar
Sticky navigation with:
- Logo (responsive - switches between full and small logo)
- Main menu items
- Dropdown menu for "More" section
- Language selector dropdown
- Mobile hamburger menu
Sticky Behavior:
The navbar becomes sticky on scroll. Controlled by JavaScript in main.js:
// Navbar appears when scrolling down
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.classList.add('shadow-sm');
}
});2. Breaking News Ticker
Animated horizontal scrolling news ticker:
- Auto-scrolling animation (30s duration)
- CSS keyframe animation
- Customizable speed in
style.css
3. News Cards
Multiple card layouts used throughout:
- Featured Card - Large image with title and excerpt
- Grid Card - Standard news card in grid layout
- List Card - Horizontal layout with small image
4. Sidebar Elements
- Recent posts list with thumbnails
- Advertisement spaces (300x250)
- Responsive on mobile (appears below main content)
5. Footer Section
Multi-column footer with:
- Brand logo and description
- Quick links
- Social media links with colored icons
- Contact information
- Copyright bar
6. Utility Classes
Custom utility classes available:
| Class | Purpose |
|---|---|
.para-small |
Small gray text for timestamps and metadata |
.divider |
Horizontal divider line |
.menu-divider |
Divider below navigation menu |
.square-shadow |
Box shadow with border radius |
.menu-active |
Active menu item styling |
7. Responsive Behavior
Breakpoints used:
- Mobile: Up to 767px
- Tablet: 768px - 991px
- Desktop: 992px and above
🌐 Browser Support
bittoNews is compatible with all modern browsers:
| Browser | Supported Versions |
|---|---|
| Google Chrome | Latest 2 versions |
| Mozilla Firefox | Latest 2 versions |
| Safari | Latest 2 versions |
| Microsoft Edge | Latest 2 versions |
| Opera | Latest version |
🙏 Credits & Resources
Third-Party Resources Used:
| Resource | Source | License |
|---|---|---|
| Bootstrap | getbootstrap.com | MIT License |
| Font Awesome | fontawesome.com | Font Awesome Free License |
💬 Support & Updates
Getting Support
If you need help with the template, we're here to assist:
- Documentation First: Please check this documentation thoroughly before requesting support.
- Support Portal: Visit our support portal for ticket-based support.
- Response Time: We aim to respond to all support requests within 24-48 hours (business days).
What's Included in Support:
- Answering questions about template features
- Bug fixes and issues related to the template
- Guidance on customization within template scope
- Help with installation and setup
What's NOT Included:
- Customization services beyond basic guidance
- Third-party plugin integration
- Backend/server-side development
- Installation on your server
Future Updates
We're committed to keeping bittoNews up to date with:
- Bug fixes and improvements
- Security updates
- Framework updates (Bootstrap, etc.)
- New features based on user feedback
Changelog
Version 1.0 (Initial Release)
- Initial template release
- 11 HTML pages included
- Bootstrap 5.2 integration
- Fully responsive design
- Font Awesome icons
- Breaking news ticker
- Multiple news layouts
- Complete documentation
❓ Frequently Asked Questions
Q: Can I use this template for commercial projects?
A: Yes, if you've purchased the Regular License, you can use it for one end product. For multiple projects, you'll need to purchase a license for each. Extended License is required for products where end users are charged.
Q: Is this template compatible with WordPress?
A: This is a static HTML template. To use it with WordPress, you'll need to convert it to a WordPress theme or integrate it with a theme builder. This requires PHP and WordPress development knowledge.
Q: Can I remove the "Brand" link from the footer?
A: Yes, you can modify or remove the footer credit link as you see fit. It's not required to keep it.
Q: How do I add more pages?
A: Duplicate an existing HTML file, rename it, update the content, and add a link to it in your navigation menu. See the "Customization" section for detailed instructions.
Q: Does this work with all devices?
A: Yes, the template is fully responsive and tested on desktop, tablet, and mobile devices of various sizes.
Q: Can I get a refund if this doesn't meet my needs?
A: Please review the item carefully before purchase. Refunds are subject to ThemeForest's refund policy. Generally, refunds are not provided for digital downloads unless there's a technical issue that cannot be resolved.
Q: Do you provide installation services?
A: Installation service is not included with the template purchase. However, we can refer you to qualified developers if needed (additional charges apply).
Q: How do I update Font Awesome icons?
A: Download the latest Font Awesome package from fontawesome.com, replace the files in the assets/css folder, and update the webfonts folder. Make sure to test all icons afterward.
Q: Can I use this with a content management system?
A: Yes, but you'll need to integrate it with your CMS of choice (WordPress, Joomla, Drupal, etc.). This requires additional development work and knowledge of your CMS's templating system.
Q: Are there video tutorials available?
A: Currently, we provide comprehensive written documentation. Video tutorials may be added in future updates based on customer feedback.
🎉 Thank You!
Thank you for purchasing bittoNews! We hope this template serves you well and helps you create an amazing news website. If you're happy with your purchase, we'd greatly appreciate it if you could take a moment to rate it on ThemeForest.
We wish you all the best with your project. If you need any assistance, don't hesitate to reach out through our support channels.
Happy Building! 🚀