A guide for beginners “Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSSbased design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web
frameworks, Bootstrap concerns itself with front-end development only.” — Wikipedia
“A Full day of WordPress2.5, focused on design and development. We’ll cover the essentials of setup, installation, and management. We’ll learn how to build custom themes using CSS, PHP, and image
architecture. We’ll also jump into custom code and template files, best practices for design and management, integrating Flash, and how to build and install WP and custom plug-ins.”
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
“A Full day of WordPress2.5, focused on design and development. We’ll cover the essentials of setup, installation, and management. We’ll learn how to build custom themes using CSS, PHP, and image
architecture. We’ll also jump into custom code and template files, best practices for design and management, integrating Flash, and how to build and install WP and custom plug-ins.”
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
In Drupal 7, I used contrib base themes like Bootstrap, Omega, or Zen as a starting point for most of the themes I created. Primarily, themers use base themes to improve accessibility, get more semantic markup, make responsive websites, and save time.
The Drupal 8 theme system provides more accessible, semantic markup in core and is responsive out-of-the-box. It's the perfect time to try theming without a contrib base theme. If you're deciding how to structure your first Drupal 8 theme and which base theme to use, this is the talk for you. The talk will include:
Overview of Drupal 8 core themes
Tips for building a responsive theme from scratch
Adding a grid system
Responsive navigation
Structuring CSS or SASS
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.
Bootstrap all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
Bootstrap 4 Tutorial PDF for Beginners with step by step examples, resources, videos, and cheat sheets. Learn how to use Bootstrap CSS in your web project now. https://bootstrapcreative.com/shop/bootstrap-quick-start/
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.
Originally given at JoomlaDay Florida 2018 on many of my favorite CSS and Sass concepts. Covering things like CSS Layout Grid, Flexbox, and how to start using Element Queries.
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
integrasi template admin lte terbaru dengan laravel 7Adi Nata
kali ini saya akan membuat tutorial integrasi template menggunakan template lengkap dengan source code dan live demo projectnya template yang saya gunakan yaitu template open source yaitu AdminLte
A presentation showing the conversion of a html+css template to a simple Drupal theme. Theme files can be found at http://groups.drupal.org/node/23694#comment-83107
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
1. Explains what Modular CSS is and how it can be helpful
2. Details how set file structures and naming conventions make this philosophy work best
3. Runs through how preprocessors like SAAS and adding on tools like SAAS-globbing and Compass can improve your workflow.
4. How this can all be applied to Drupal
In Drupal 7, I used contrib base themes like Bootstrap, Omega, or Zen as a starting point for most of the themes I created. Primarily, themers use base themes to improve accessibility, get more semantic markup, make responsive websites, and save time.
The Drupal 8 theme system provides more accessible, semantic markup in core and is responsive out-of-the-box. It's the perfect time to try theming without a contrib base theme. If you're deciding how to structure your first Drupal 8 theme and which base theme to use, this is the talk for you. The talk will include:
Overview of Drupal 8 core themes
Tips for building a responsive theme from scratch
Adding a grid system
Responsive navigation
Structuring CSS or SASS
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.
Bootstrap all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
Bootstrap 4 Tutorial PDF for Beginners with step by step examples, resources, videos, and cheat sheets. Learn how to use Bootstrap CSS in your web project now. https://bootstrapcreative.com/shop/bootstrap-quick-start/
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.
Originally given at JoomlaDay Florida 2018 on many of my favorite CSS and Sass concepts. Covering things like CSS Layout Grid, Flexbox, and how to start using Element Queries.
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
integrasi template admin lte terbaru dengan laravel 7Adi Nata
kali ini saya akan membuat tutorial integrasi template menggunakan template lengkap dengan source code dan live demo projectnya template yang saya gunakan yaitu template open source yaitu AdminLte
A presentation showing the conversion of a html+css template to a simple Drupal theme. Theme files can be found at http://groups.drupal.org/node/23694#comment-83107
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
1. Explains what Modular CSS is and how it can be helpful
2. Details how set file structures and naming conventions make this philosophy work best
3. Runs through how preprocessors like SAAS and adding on tools like SAAS-globbing and Compass can improve your workflow.
4. How this can all be applied to Drupal
Create a simple and elegant bootstrap registration page. The Skills required is HTML, CSS, Bootstrap. This is a Responsive registration page using bootstrap.
Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives we the ability to easily create responsive designs.
Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
This book has been written to assist entrepreneurs, especially those who have no sales experience, to gain a better understanding of sales. It is one of the elements of setting up a business that many entrepreneurs dislike. However, with the right positive mental attitude selling is not as daunting as many people believe. This book is the result of 20 years practice, research and discussion on the subject of sales. It is a guide and starting point for readers who wish to begin their journey on the road of sales and negotiating
Today, top companies leverage automated testing to increase product longevity, reduce costly and repetitive build-out, and improve iteration quality. This whitepaper will provide a brief introduction to automated testing. It will also address the benefits and limitations of automated testing and give an in-depth example of consumer-driven contract testing.
Visual Studio 2019 is the new release of Microsoft’s premiere development environment, which
allows for building applications for the desktop, the web, the cloud, and mobile devices. It
follows cross-platform paradigms and uses a plethora of programming languages and
frameworks. Visual Studio 2019 combines the most important investments in technology into the
integrated development environment (IDE) and includes new productivity features; integrated,
cloud-based collaboration tools; an AI-assisted coding experience; and support for the most
recent versions of .NET Core to create cross-platform applications that run across operating
systems.
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.
This book is written primarily for those IT professionals who work with the .NET platform because LINQPad is a utility targeted for these kinds of developers. It’s best that you have C# programming language skills and some basic knowledge about LINQ.
Quality defects in TMT Bars, Possible causes and Potential Solutions.PrashantGoswami42
Maintaining high-quality standards in the production of TMT bars is crucial for ensuring structural integrity in construction. Addressing common defects through careful monitoring, standardized processes, and advanced technology can significantly improve the quality of TMT bars. Continuous training and adherence to quality control measures will also play a pivotal role in minimizing these defects.
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
Forklift Classes Overview by Intella PartsIntella Parts
Discover the different forklift classes and their specific applications. Learn how to choose the right forklift for your needs to ensure safety, efficiency, and compliance in your operations.
For more technical information, visit our website https://intellaparts.com
Vaccine management system project report documentation..pdfKamal Acharya
The Division of Vaccine and Immunization is facing increasing difficulty monitoring vaccines and other commodities distribution once they have been distributed from the national stores. With the introduction of new vaccines, more challenges have been anticipated with this additions posing serious threat to the already over strained vaccine supply chain system in Kenya.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxR&R Consult
CFD analysis is incredibly effective at solving mysteries and improving the performance of complex systems!
Here's a great example: At a large natural gas-fired power plant, where they use waste heat to generate steam and energy, they were puzzled that their boiler wasn't producing as much steam as expected.
R&R and Tetra Engineering Group Inc. were asked to solve the issue with reduced steam production.
An inspection had shown that a significant amount of hot flue gas was bypassing the boiler tubes, where the heat was supposed to be transferred.
R&R Consult conducted a CFD analysis, which revealed that 6.3% of the flue gas was bypassing the boiler tubes without transferring heat. The analysis also showed that the flue gas was instead being directed along the sides of the boiler and between the modules that were supposed to capture the heat. This was the cause of the reduced performance.
Based on our results, Tetra Engineering installed covering plates to reduce the bypass flow. This improved the boiler's performance and increased electricity production.
It is always satisfying when we can help solve complex challenges like this. Do your systems also need a check-up or optimization? Give us a call!
Work done in cooperation with James Malloy and David Moelling from Tetra Engineering.
More examples of our work https://www.r-r-consult.dk/en/cases-en/
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
NO1 Uk best vashikaran specialist in delhi vashikaran baba near me online vas...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
1. Learn Bootstrap 4 in 30 minutes by building a
landing page website
A guide for beginners
“Bootstrap is a free, open-source front-end
library for designing websites and web
applications. It contains HTML- and CSS-
based design templates for everything from
typography, forms, buttons, navigation and
other interface components as well as
JavaScript extensions. Unlike many other web
2. frameworks, Bootstrap concerns itself with
front-end development only.” — Wikipedia
There are many versions of Bootstrap with version 4 being the
latest. In this article, we are going to build a website using
Bootstrap 4.
Prerequisites
Before starting, there are some skills you’ll have to know in order
to learn and use the Bootstrap framework:
HTML fundamentals
basic knowledge of CSS
and some basic JQuery
Table of Contents
We will cover the topics below while building the website:
Downloading and installing Bootstrap 4
The new features of Bootstrap 4
Bootstrap Grid system
Navbar
Header
3. Buttons
About Section
Portfolio Section
Blog Section
Cards
Team Section
Contact Form
Fonts
Scroll Effect
Wrap-up and Conclusion
Downloading and installing Bootstrap
4
There are three ways to install and include Bootstrap 4 for your
project:
1. Use npm
You can install Bootstrap 4 by running this command npm install
bootstrap
2. Use a Content Delivery Network (CDN)
By including this link in your project between head tags:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
5. Bootstrap 4 now comes with some awesome features that didn’t
exist in the last version:
Bootstrap 4 is written using Flexbox Grid, whereas Bootstrap 3
was written using the float method.
Bootstrap 4 uses rem CSS units whereas Bootstrap 3 uses px.
See how these two units differ.
Panels, thumbnails, and wells have been dropped entirely.
You can read in detail more about the global changes and
removed features of Bootstrap 4 here.
Without jumping too deep into detail here, let’s move on to some
other important things.
The Bootstrap Grid system
The Bootstrap Grid system helps you to create your layout and
easily build a responsive website. There have not been any changes
in the class names, except the .xs class, which no longer exists in
Bootstrap 4.
The grid is divided into 12 columns, so your layout will be based on
this.
To use the grid system you’ll have to add a .row class to the
main div.
col-lg-2 // class used for large devices like laptops
col-md-2 // class used for medium devices like tablets
col-sm-2// class used for small devices like mobile phones
6. Navbar
The navbar wrapper is pretty cool in Bootstrap 4. It’s so helpful
when it comes to building a responsive navbar.
To get it, we are going to add the navbar class to our index.html file:
<!-- navbar -->
<nav class="navbar navbar-expand-lg fixed-top ">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse "
id="navbarSupportedContent"> <ul class="navbar-nav mr-4">
<li class="nav-item">
7. <a class="nav-link" data-value="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " data-
value="portfolio"href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#">
Team</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="contact" href="#">Contact</a>
</li>
</ul>
</div></nav>
Create and include a main.css file so that you can customize the
CSS style.
Put this within the head tag in your index.html file:
<link rel="stylesheet" type="text/css" href="css/main.css">
Let’s add some colors to our navbar:
.navbar{ background:#F97300;}
.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}
.nav-link{ margin-right: 1em !important;}
.nav-link:hover{ background: #f4f4f4; color: #f97300; }
.navbar-collapse{ justify-content: flex-end;}
.navbar-toggler{ background:#fff !important;}
The new Bootstrap Grid is built with the Flexbox system, so for
alignment, you have to use a Flexbox property. For example, to
place the navbar menu on the right we need to add a justify-
content property and set it to flex-end.
8. .navbar-collapse{
justify-content: flex-end;
}
Add the .fixed-top class to the navbar to give it a fixed position.
To make the navbar background color light, add .bg-light. For a
dark background, add .bg-dark, and for a light blue background,
add
.bg-primary.
Here’s how that should look:
.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}
Header
<header class="header">
</header>
Let’s try and create a layout for the header.
Here, we want to make sure the header takes up the window’s
height so we are going to use a little JQuery code.
First, create a file named main.js and include it in
the index.html file before the closing body tag:
<script type="text/javascript" src='js/main.js'></script>
In the main.js file insert this a little code of JQuery:
9. $(document).ready(function(){
$('.header').height($(window).height());
})
It’d be pretty cool if we set a nice background image to the header:
/*header style*/
.header{
background-image: url('../images/headerback.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
Let’s add an overlay to make the header look a bit more
professional:
Add this to your index.html file:
10. <header class="header">
<div class="overlay"></div>
</header>
Then, add this to your main.css file:
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}
Now we have to add a description inside the header.
To wrap our description we’re first going to create a div and give it
a class .container.
.container is a Bootstrap class that will help you to wrap your
content and make your layout more responsive:
<header class="header">
<div class="overlay"></div>
<div class="container">
</div>
</header>
Then, add another div which will contain the description.
<div class="description ">
<h1> Hello ,Welcome To My official Website
<p> cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<button class="btn btn-outline-secondary btn-lg">See
more</button> </h1>
</div>
11. We’ll give it a class of .description and add the .text-center class
to make sure the content is placed in the center of the page.
Buttons
Add the class .btn btn-outline-secondary to the button element.
there are many other Bootstrap classes for buttons.
Check some examples:
CodePen Embed — buttons in Bootstrap 4
Buttons Button primary Button default Button danger Button info Button warning
Button dark Button success Buttons…codepen.io
Here’s how the styling for the .description looks in
the main.css file:
.description{
position: absolute;
top: 30%;
margin: auto;
padding: 2em;
}
.description h1{
color:#F97300 ;
}
.description p{
color:#666;
font-size: 20px;
width: 50%;
line-height: 1.5;
}
.description button{
border:1px solid #F97300;
background:#F97300;
color:#fff;
}
After all of that, our header will look like this:
13. About Section
In this section, we will use some Bootstrap Grid to divide the
section into two parts.
To start our grid, we have to assign the .row class to the parent div.
<div class="row"></div>
The first section will be on the left and will contain a picture, the
second section will be on the right and contain a description.
Each div will take up 6 columns — that means half of the section.
Remember that a grid is divided into 12 columns.
In the first div on the left side:
<div class="row">
// left side
<div class="col-lg-4 col-md-4 col-sm-12">
14. <img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div>
</div>
After adding the the HTML elements on the right-side, the
structure of the code will look like this:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo
consequat. 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>
</div>
</div>
Here’s how I’ve made it look:
.about{
margin: 4em 0;
padding: 1em;
position: relative;
}
.about h1{
16. Portfolio Section
Now, let’s move onto the next bit and make a portfolio section that
will contain a gallery.
The structure of our HTML code for the Portfolio section looks like
this:
<!-- portfolio -->
<div class="portfolio">
<h1 class="text-center">Portfolio</h1>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port13.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
17. <div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port6.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port3.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port11.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/electric.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/Classic.jpg" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port8.png" class="img-fluid">
</div>
</div>
</div>
</div>
Adding .img-fluid to each image to makes it responsive.
Each item in our gallery will take up 4 columns (remember, col-
md-4 for medium devices, col-lg-4 for large devices). That’s equal
to 33.33333% on large devices such desktops and large tablets,
and 12 columns on a small device (like iPhone, mobile devices) will
take up 100% of the container.
Let’s add some styling to our Gallery:
/*Portfolio*/
.portfolio{
margin: 4em 0;
position: relative;
}
.portfolio h1{
color:#F97300;
margin: 2em;
}
18. .portfolio img{
height: 15rem;
width: 100%;
margin: 1em;
}
Blog Section
Cards
Cards in Bootstrap 4 make blog design so much easier. The cards
are appropriate for articles and posts.
To create a card, we use the class .card and assign it to
a div element,
The card class contains many features:
.card-header: define the card header
19. .card-body: for the card body
.card-title: the title of the card
card-footer: define the footer of the card.
.card-image: for the card’s image
So, our website’s HTML should now look something like this:
<!-- Posts section -->
<div class="blog">
<div class="container">
<h1 class="text-center">Blog</h1>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/polit.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/images.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
20. </p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/imag2.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
We need to add some CSS style to the cards:
.blog{
margin: 4em 0;
position: relative;
}
.blog h1{
color:#F97300;
margin: 2em;
}
.blog .card{
box-shadow: 0 0 20px #ccc;
}
.blog .card img{
21. width: 100%;
height: 12em;
}
.blog .card-title{
color:#F97300;
}
.blog .card-body{
padding: 1em;
}
After adding the Blog section to our website, the design should
now look something like this:
22.
23. Cool isn’t it?
Team Section
In this section we will use the grid system to distribute even space
between images. Each image takes up 3 columns (.col-md-3) of the
container — that equals 25% of the total space.
Our HTML structure:
<!-- Team section -->
<div class="team">
<div class="container">
<h1 class="text-center">Our Team</h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-2.jpg" class="img-fluid" alt="team">
<div class="des">
Sara
</div>
<span class="text-muted">Manager</span>
25. border-bottom-left-radius: 93%;
transition:.3s ease-in-out;
}
Adding an overlay to the image on-hover using animation would
be nice .
To make this effect , add the styles below to main.css file:
.team .item:hover .des{
height: 100%;
background:#f973007d;
position: absolute;
width: 89%;
padding: 5em;
top: 0;
border-bottom-left-radius: 0;
}
Super cool!
Contact Form
26. The Contact Form is the last section to add, then we are done .
The Contact Form section will contain a form through which
visitors can send an email or give feedback. We will use some
Bootstrap classes to make the design beautiful and responsive.
Like Bootstrap 3, Bootstrap 4 also uses the .form-control class for
input fields, but there are some new features added — like
switching from .input-group-addon (deprecated) to .input-group-
prepend (to use icons as labels ).
See Bootstrap 4 document for more information. In our Contact
form we will wrap each input between a div that has the
class .form-group.
The index.html file now looks something like this:
<!-- Contact form -->
<div class="contact-form">
<div class="container">
<form>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h1>Get in Touch</h1>
28. .contact-form .right .form-control::placeholder{
color: #888;
font-size: 16px;
}
Fonts
I think default fonts are ugly so we are going to use the Google
Font API, and we’ll choose Raleway which is a nice font and
appropriate to our template.
Add this link into your main.css file:
@import url('https://fonts.googleapis.com/css?family=Raleway');
and set the global style to HTML and heading tags:
html,h1,h2,h3,h4,h5,h6,a{
font-family: "Raleway";
}
Scroll Effect
29. The last thing missing is scroll effect. Here, we’ll have to use some
JQuery. Don’t worry if you are not familiar with it, just add this
code into yourmain.js file:
$(".navbar a").click(function(){
$("body,html").animate({
scrollTop:$("#" + $(this).data('value')).offset().top
},1000)
})
and add a data-value attribute to each navbar link:
<li class="nav-item">
<a class="nav-link" data-value="about"
href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="portfolio"
href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog"
href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#">
Team</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="contact"
href="#">Contact</a>
</li>
Set an id attribute to each section.
Note: The id must be identical to the data-value attribute in the
navbar link for the scroll to work:
<div class="about" id="about"></div>
30. Wrap-up and Conclusion
Bootstrap 4 is a great option for building your web application. It
delivers high quality of UI elements and it’s easy to customize,
integrate and use. It will also help you to include responsiveness in
your website, therefore delivering a premium user experience to
your users.
You will find the project’s files on GitHub.
Prepared By : ViASTUDY
Source: medium.freecodecamp.org