1581923583
How to Use Jekyll with Bootstrap 4
In theory, it’s just putting HTML, CSS, and JavaScript on a page. In practice, however, it quickly starts becoming complicated — there’s needless copying of code from the head across every page, manually compiling SCSS into CSS, sorting through thousands of lines of repeating code.
And then, if you or the client ends up needing a blog, you throw up your hands and just build a clunky WordPress site.
Jekyll is a static site framework that simplifies all of these steps and allows a developer to focus on the most important part of development — writing meaningful code.
Besides, it’s 2020, and if your New Year’s resolution was to stop using WordPress, it’s not too late to make it happen now.
Why Use Jekyll
Jekyll websites are, as the official documentation puts it :
You can build the basic structure of a site in under an hour and have the site deployed by the afternoon.
Jekyll sites are incredibly fast — at the end of the build process, the framework outputs a folder with a static site that can be added to any hosting provider, via shell access, FTP, or cPanel.
Most of all, Jekyll websites are simple to update and maintain. The framework is built to separate the design and data (like a modern JavaScript framework, but simpler). Therefore, changing a menu, updating a list, or adding a new post is effortless.
Getting Started
The first and only step before working with Jekyll is to download Ruby. You don’t need to learn or really know the language itself, but the framework is built using the Ruby language and Jekyll itself is a Ruby gem. While every Mac already comes with Ruby installed, I recommend getting the latest stable version via rbenv. Once set up, simply install the Jekyll and Bundler gems and you are ready to build your first site:
gem install bundler jekyll
Step 1. Create the Application
If you’ve ever worked with Ruby on Rails, Jekyll projects start out in a very similar way.
The bundle init command helps create a Ruby Gemfile to manage the different Jekyll dependencies. (Think of Ruby gems as Wordpress plugins or npm packages).
We’ll add a few gems at the end to help with things like SEO or generating a sitemap.
jekyll new PROJECT_NAME --blank
cd PROJECT_NAME
bundle init
The last step of the setup is adding the Jekyll gem to the Gemfile anywhere below the first line. Then, run the bundle command to add the gem to the site.
#Gemfile
gem "jekyll"
#terminal
bundle
Start the server and your site is live!
jekyll serve --livereload
To check the site, go to localhost:4000 in your browser
Step 2. Build Your First Page
Let’s create the first page — index.html. Remove any Markdown pages in the root of the site and touch index.html to create the first page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jekyll Bootstrap Starter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If I was building a static site, to create an about.html or a contact.html page, I’d repeat the steps, and add my HTML head code to every page. With Jekyll, this process is much more simple.
Step 3. Add a Layout With Jekyll
This is where the Jekyll magic comes in.
Typically, every HTML page has a head and the content in the head is mostly the same across all pages. This means that every page has oodles of repeating code and some different elements, such as the meta title and description.
Jekyll layouts are a built-in template that wraps around the content of the page. They live in the layouts directory and are, by default, included in the installation:
#_layouts/default.html
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
</head>
<body>
{{ content}}
</body>
</html>
Inside the layout file is the head and the body of the site. There are also a few variables in the Jekyll templating language — Liquid.
The {{ content }} tag contains all of the code of the individual page, while the {{page.title}} and {{ site.title}} are variables that are set in the front matter of the site and the individual pages.
What is front matter?
Front matter is a configuration block that you can add in front of the HTML or Markdown code on your page to help set things like layouts or metadata. It’s three dashed lines between which you can add variables:
---
title: "About"
description: "Some awesome description"
---
To retrieve the variables on the page, access them as attributes of the page variable set by Liquid:
<h1>{{ page.title }}</h1>
<h2>{{ page.description }}</h2>
Add the layout to the page
Using layouts and front matter, now every HTML page can be simplified to look like this:
---
layout: default
title: Home
---
<h1>Hello World</h1>
You can add the layout to any page of the site. For example, make an “about” page in just two steps:
touch about.html
Then, add the content to the new page:
---
layout: default
title: About
---
<h1>About us</h1>
Step 4. Add a Navbar
The site now has two pages, let’s create a navbar to link between them.
Like the head, the navbar is an element that will repeat on every page. This code can be added directly to the layout, or following the principle of separation of concerns, Jekyll has an _includes folder for repeating elements.
What is _includes
The _includes folder contains snippets of code that can be reused throughout the site — think of it as partials in Rails, or components in React. Each snippet of code can be called individually on a page, or inside the layout.
Let’s build the navbar by creating the file:
touch _includes/navbar.html
Then, I’ll add a simple Bootstrap navbar to the generated file:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/about.html">About</a>
</div>
</div>
</nav>
To add the navbar file to any page, use another Liquid snippet, referencing the name: {% include navbar.html %}. Here, I’m adding the navbar directly into my layout file, above the content tag:
#_layouts/default.html
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
</head>
<body>
{% include navbar.html %} <--- add the navbar here
{{ content}}
</body>
</html>
Step 5. Add Data
Jekyll is great because it is incredibly simple to maintain. Say we want to add a new page and have it included in the navigation bar. Currently, the only way to do that is to manually edit the file inside the _includes folder.
However, Jekyll provides a simpler way to do that, by loading data from a YAML, CSV, or JSON file. Let’s add the structure of the navbar to a _data/navbar.yml file:
touch _data/navbar.yml
#_data/navbar.yml
- name: Home
link: /
- name: About
link: /about
The name corresponds to the page link in the navbar and the link is the HREF attribute. Access the variable in Liquid through site.data.navigation and add it to the navbar using a for-loop:
{% for item in site.data.navbar %}
<a href="{{ item.link }}"> {{ item.name }}</a>
{% endfor %}
Formatted inside the Bootstrap navbar, it might look something like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
{% for item in site.data.navbar %}
<a class="nav-item nav-link" href="{{item.link}}">{{ item.name }}</a>
{% endfor %}
</div>
</div>
</nav>
The navbar still needs to be formatted, but the site is finally coming together:
Step 6. Add Assets and Bootstrap
Finally, the site is ready to import assets. Typically, the CSS, JS, and images reside in the assets folder. Add them to the layout to compile the assets into the site automatically.
However, there are a few more steps to get the latest version of Bootstrap compatible with the site.
Download Bootstrap 4 from source
Visit the Bootstrap website and download the uncompiled source files. Create a folder called bootstrap in the assets directory and move the contents of the scss folder into the downloaded file:
#shell
mkdir assets/css/bootstrap
mv ~/path/to/bootstrap/scss/* ~/path/to/project/assets/css/bootstrap
Import Bootstrap into the project
Next, import the Bootstrap file into the main CSS file. The empty front matter at the beginning of the file allows Jekyll to precompile the SCSS into CSS automatically.
#assets/css/main.scss
---
---
@import "main";
@import 'bootstrap/bootstrap';
Finally, tell the application to compile the CSS from the assets folder. Add the following line to the _config.yml file. Make sure to restart the server to incorporate the changes.
_config.yml
sass:
sass_dir: assets/css
Add JavaScript
For better performance, JavaScript should always be loaded before the end of the body tag.
Because the code needs to be reused on every page, the best way to add it in Jekyll is to create a file in the _includes folder and import it directly into the layout:
#shell
touch _includes/footer.html
#_includes/footer.html
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
#_layouts/default.html
<body>
{% include navbar.html %}
{{ content }}
{% include footer.html %} <-- add this line before the closing tag
</body>
Step 7. The Final Steps: Add SEO and Metadata
After successfully adding the assets, the site is almost ready. I don’t focus on the blogging aspect of Jekyll in this article, but let me know if you want one based on that in the future!
I briefly touched on the _config.yml file in the last step. This file contains all of the site-wide configuration, as well as the metadata.
First, add the Ruby gems to create a sitemap and the SEO tags to the Gemfile:
#Gemfile
group :jekyll_plugins do
gem 'jekyll-sitemap'
gem 'jekyll-seo-tag'
gem 'jekyll-autoprefixer'
end
#shell
bundle install
Incorporate them into the configuration by enabling the plugins, then restarting the Jekyll server.
#_config.yml
plugins:
- jekyll-autoprefixer
- jekyll-seo-tag
- jekyll-sitemap
#_layouts/default.html
{% seo %} <- add before the </head> tag
Finally, set up the SEO in the configuration file. The plugin will automatically include any defined values and ignore blank ones:
#_config.yml
title: "Jekyll Bootstrap Starter" # the name of your site, e.g. ACME Corp.
tagline: "An awesome tagline"
email: your.email@gmail.com
description: >- # this means to ignore newlines until "baseurl:"
Add description here
author: name
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
google_analytics: UA-111111111-1
twitter:
username:
card: summary #keep this to generate a twitter share card
For advanced usage, please refer to the GitHub documentation.
Step 8. Deploy the Site and Push It Live!
There are primarily two ways to deploy a Jekyll site. The first is to simply copy the files to a cPanel or FTP server. The second is to use a hosting provider like Netlify for continuous integration. I’ll demo both methods.
Add the site via cPanel/FTP
Once the site is ready to deploy, run the build command to generate the site. Then, copy the contents of the _site folder to the public_html folder of your hosting provider:
#shell
jekyll build
Use continuous integration with Netlify
The best way to publish a Jekyll site is to set up CI with a hosting provider like Netlify. Netlify is a static site generator, which nerds like Wes Bos and myself love.
Choose the “New Site from Git” option and add the jekyll build command. Then, each time your site is pushed to GitHub, it will run a fresh version of the build on Netlify and publish a new version.
And you’re live!
- Here’s the demo of the site.
- Here’s the source code.
Thank you for reading and let me know if you’d like more articles on Jekyll!
#javascript #bootstrap4 #Ruby on Rails #programming
What is GEEK
Buddha Community
1611112146
Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make
Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.
This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.
Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter
- Download Codeigniter Latest
- Basic Configurations
- Create Table in Database
- Setup Database Credentials
- Create Controller
- Create View
- Create Route
- Start Development Server
https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/
#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js
1620729846
Why Use WordPress? What Can You Do With WordPress?
Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?
WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:
1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.
2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.
3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.
4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.
5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.
6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.
#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website
1605024026
Bootstrap Tutorial 2020 - Getting Started
In this video, I’ll be showing you how to quickly get started with Bootstrap.
#bootstrap tutorial #introduction #bootstrap 4 #bootstrap #bootstrap tutorial for beginners step by step #getting started
1597056398
How to put items underneath each other flex box in Bootstrap 4 ?
Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.
Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).
The following Examples represent different ways to put items underneath each other in a Flex-Box.
**Example 1: **Use .**flex-column **class to put items underneath each other.
<div class="d-flex flex-column"></div>
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content=
"``width``=``device``-width, initial-scale``=``1``,
shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
<``**div** class``=``"d-flex flex-column bd-highlight mb-3"``>
<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>
</``**div**``>
</``**center**``>
</``**body**``>
</``**html**``>
Output:
**Example 2: **You can also use the .flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content="``width``=``device``-width,
initial-scale``=``1``, shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
<``**title**``>flexbox | bootstrap4</``**title**``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
<``**div** class``=``"d-flex flex-column-reverse bd-highlight mb-3"``>
<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>
<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>
</``**div**``>
</``**center**``>
</``**body**``>
</``**html**``>
Output:
**Example 3: By using flex-direction: column; and align-items: center; **you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.
- HTML
<!DOCTYPE html>
<``**html** lang``=``"en"``>
<``**head**``>
<!-- Required meta tags -->
<``**meta** charset``=``"utf-8"``>
<``**meta** name``=``"viewport" content="``width``=``device``-width,
initial-scale``=``1``, shrink-to-fit``=``no``">
<!-- Bootstrap CSS -->
<``**link** rel``=``"stylesheet" href``=
"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"
integrity``=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin``=``"anonymous"``>
<``**script** src``=``"[https://kit.fontawesome.com/577845f6a5.js](https://kit.fontawesome.com/577845f6a5.js)"
crossorigin``=``"anonymous"``>
</``**script**``>
<``**title**``>flexbox | bootstrap4</``**title**``>
<``**style** type``=``"text/css"``>
.my_content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.my_options {
border: 1px solid green;
display: flex;
align-items: center;
justify-content: center;
}
</``**style**``>
</``**head**``>
<``**body**``>
<``**center**``>
<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>
</``**center**``>
<``**div** class``=``"my_content"``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-down fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-down</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-left fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-left</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-right fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-right</``**h3**``>
</``**div**``>
<``**div** class``=``"my_options col-xs-6"``>
<``**div**``><``**i** class``=``"fa fa-hand-o-up fa-2x"
aria-hidden``=``"true"``></``**i**``></``**div**``>
<``**h3**``> fa-hand-o-up</``**h3**``>
</``**div**``>
</``**div**``>
</``**body**``>
</``**html**``>
#bootstrap #web technologies #web technologies questions #bootstrap-4 #bootstrap-misc #picked
1600497828
How to Create Testimonial Carousel using Bootstrap 4
How to create Testimonial Carousel using Bootstrap 4
SEMRUSH - World’s No. 1 Marketing Tool
REGISTER HERE : https://bit.ly/3g3X9B2
Sign Up For Fiverr And Get 20% Off Your First Order:
http://www.fiverr.com/s2/179025a450
Subscribe to this Channel : https://bit.ly/23QaHDm
#bootstrap #bootstrap 4 #css #html