Trending February 2024 # How To Use Bootstrap 5 Grid Layouts? – Webnots # Suggested March 2024 # Top 11 Popular

You are reading the article How To Use Bootstrap 5 Grid Layouts? – Webnots updated in February 2024 on the website Achiashop.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested March 2024 How To Use Bootstrap 5 Grid Layouts? – Webnots

Bootstrap 5 offers a powerful grid layout system which helps to create mobile friendly layouts easily. There are six responsive breakpoints for different sizes of devices in Bootstrap grid layout system. There are 12 columns in each and by mixing and matching, you can create different layouts you desire. The grid system is based on flex box and is fully responsive.

Bootstrap 5 Grid Layout Tutorial

This tutorial contains the following topics:

Grid layout basics

Tier 5 grid system

Equal width simple grid

One column width and resize other columns

Variable Width Content

Equal Width Multiple Rows Grid

Stacked Horizontal Grid

Vertical Alignment

Horizontal Alignment

Grid with No Gutters

Wrapped Column Grid

Column Content Reordering within Grid

Column Offsetting

Nesting within Grid

1. Basics of Bootstrap Grid System

The grid system uses three main CSS classes to create the needed layout – .container, .row and .col. The container covers the complete layout and then the rows and then the columns.

Use .container class for centering the content with fixed width and .container-fluid for responsive full width layout.

You can use .row class to include all horizontal columns divided into 12 equal width.

Place the actual content inside the columns using .col or .col-* classes. For example, a row can contain two columns like .col-8 + .col-4. The column should be the immediate child of the row class.

All columns uses flexbox which means simple using .col class will divide the row into equal width columns. For example, when you use two .col classes within a row then it will into two 50% areas automatically.

You can explicitly define column width like .col-sm-8 which will occupy 3/4 (75%) of the row’s width.

By default columns and rows have padding and margin for better visibility. You can remove the margin and padding by adding an additional “.noglutter” class with “.row”.

Bootstrap 5 offers six breakpoints – extra small (xs), small (sm), medium (md), large (lg), extra large (xl) and extra extra large (xxl).

All tiers of breakpoints by default use the .col class. Any other classes used will be applied to all higher level devices. For example, .col-sm-4 (small) will be applied to small, medium, large and extra large devices.

2. Tier 6 Grid System

Below table shows the six tiers of breakpoints offered in Bootstrap 5:

GridExtra SmallSmallMediumLargeExtra LargeExtra Extra LargeBreakpoint<576px≥576px≥768px≥992px≥1200px≥1400pxCSS Class.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-Container Max WidthNone (auto)540px720px960px1140px1320px

Columns – Each row is divided in to 12 equal width columns.

Gutter Width – 15 pixels on each side of the column totaling to 30px.

Nesting – Yes, columns can be nested within other column.

Column Ordering – Yes, content inside any of the column within a row can be reordered.

Let us show different examples to understand the grids better:

3. Equal Width Simple Grid

Create simple grid with equal columns just using “.col” classes. When using “.col” classes the row will be automatically divided into equal width columns. For example when use two “.col” classes then the row will be divided into two 1/2+1/2 columns. Below is an example codes to create 1/2+1/2 and 1/3+1/3+1/3 columns using simple “.col” classes.

.col .col .col .col .col

The equal columns will be shown on the browser like below:

4. One Column Width and Resize Other Columns

Bootstrap grid system allows you to define the width for one column and the remaining columns within the same row will automatically adjusted. For example, when you define “col + col-6 + col” in a row then it will be automatically divided like “1/3+1/6+1/3” columns. Below are two examples for defining one column and then the remaining two other columns will be adjusted accordingly.

Below is the code for adjusting columns surrounding the column with the defined width:

.col .col-6 .col .col .col-5 .col

5. Variable Width Content

Width of the columns can be restricted to the actual content using “.col-{breakpoint}-auto” class, for example, “.col-md-auto”.

The middle columns in the above example is automatically adjusted to the width of the content. Below is the code for the above grid layout:

.col .col-lg-2 .col-md-auto (variable width) .col .col-lg-2 .col .col-md-auto (variable width) .col .col-lg-2

6. Equal Width Multiple Rows Grid

Simply create a multiple columns layout within a row using “.col” classes continuously. You just need to insert “.w-100” class where a breakpoint is required.

Below is the code to create equal width multiple row using a single “row” class.

7. Stacked Horizontal Grid

You can create stacked grid layout using “.col-sm-” classes which will be expanded to horizontal grid on desktop.

Below is the code for creating stacked horizontal grid layout as shown above.

8. Vertical Alignment

The vertical alignment of the content inside a column can be adjusted by adding one of the following three classes with “.row” class like below:

9. Horizontal Alignment

Similar to vertical alignment, you can also adjust the horizontal alignment of the columns like below:

.col-4 .col-4 .col-4 .col-4 .col-4 .col-4 .col-4 .col-4 .col-4 .col-4

This will produce the following result on the browser:

10. Grid with No Gutters

By default the columns will have horizontal padding and the rows will have negative horizontal margins for better alignment. You can remove those margins and paddings by using “no-gutters” class with “row” as shown below.

It will produce the following result:

11. Wrapped Column Grid

When you have more than 12 columns in a row then the columns will be automatically wrapped to next row. For example, with the below first two columns will fit in first row (9+2=11) while the third and fourth columns will be wrapped in to new line.

The wrapped columns will look like below:

12. Column Content Reordering within Grid

Bootstrap allows you to reorder the content of a column regardless of the position in a row. For example, there are three columns used in the below grid layout.

First .col No order Second .col .order-12 moved to last Third .col .order-1 moved to first

The result looks like below with no ordered column will take the precedence of all other ordered columns and shown in first column. Content within the column using “order-12” class will be moved to the last position. And the content within the column using “order-1” will be moved to center (first) position.

13. Column Offsetting

From Bootstrap 4, they dropped the column offsetting feature due to the use of flexbox grid layout. But you can stll move the columns away using margin utility classes like “ml-auto”, “mr-auto”, etc.

Below is the result of the column offsetting using margin classes:

14. Nesting within Grid

You can also nest the columns within other columns as shown below:

Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6

It will produce the following result:

Conclusion

As you can see, there are plenty of default layouts you can create with the Bootstrap 5 grid layout system. It is also possible to create custom CSS for creating customized layouts or modifying one of the default layouts. The solid flexbox grid layout and reusable components make Bootstrap 5 more stronger than the previous version.

You're reading How To Use Bootstrap 5 Grid Layouts? – Webnots

How To Create Bootstrap 5 Tables? – Webnots

Bootstrap allows to create beautiful tables using the CSS framework. Version 4 has some new classes for inverting the table color and making the table responsive. You can different type of tables easily with the latest version 5 also. In this tutorial we will discuss various possibilities of creating tables with Bootstrap 5. You can download the files used on the this tutorial here.

Default Bootstrap 5 Table Inverting the Table Colors

All content remains same here similar to default table.

The inverse table will have very dark and attractive background as shown below:

Inverse Header Table

And our mark sheet table will have a black header row like below:

That’s not all!!! There are many more options with Bootstrap. Let us create some more variations.

Striped Bootstrap 4 Table

Striped table allows you to create alternate colors for the rows. Just add “table-striped” to the existing “table” class” and the table will have striping pattern. The light grey background color will be applied to all odd numbered rows starting from the first row.

Striped table is mostly preferred to differentiate the rows and showcase the content to visitors.

Bootstrap Bordered Table

This one will simple add the border to the default table. What you need is to append “table-bordered” class to the existing “table” class.

Our mark sheet table with border should look like below:

You can also easily create the bordered table with stripes on rows.

Table with Hover Effects on Rows

How about adding hover effects to your table? The “table-hover” class will do that for you. Hover the mouse over the table to see the corresponding row is highlighted with light grey background color.

Below is how your table should look when you move the mouse on second row.

Responsive Bootstrap Table for Smaller than 768 Pixel Devices

Here is how our responsive table will be looking. Remember the horizontal scroll bar will only appear when the table is viewed with the screen size smaller than 768 pixel. Otherwise you will not find any difference compared to regular Bootstrap table.

Bootstrap Table with Compressed Text

Sometimes it is necessary to compress the height of the table to reduce the space occupied. Bootstrap allows to do this by adding “table-sm” class to an existing “table” class as shown below:

This will remove the padding and make the table height compact.

Creating Bootstrap Table with Background Color

As of now, what we have discussed is to create simple table or to have default light grey background for rows. Bootstrap also enables coloring your table cells and rows to make it beautiful. You can highlight any rows or any cells of your table in five different colors. There are two set of CSS classes that help you to add background colors – one is contextual classes and other is background utility classes. The below table explains different options available:

Table Contextual Classestable-activeLight grey hover colortable-successLight green success or positive actiontable-infoLight blue for information messagetable-warningLight yellow for indicating warningtable-dangerLight red for indicating dangertable-primaryLight blue for indicating primary color in Bootstraptable-secondaryLight red for indicating dangertable-lightLight gray for indicating no colortable-darkLight black for indicating dark

Background Utility / Contextual Classesbg-primaryMedium blue as primary colorbg-successForest green for successbg-warning

Free speech green color 

for warning

bg-infoLight sea green for informationbg-dangerRed (Cinnabar) for dangerbg-lightSolitude for lightbg-darkMirage color for darkbg-secondaryAluminium color for secondary

Remember these classes can be applied to individual rows and cells of Bootstrap table in any combination.

Colored Rows with Contextual Classes

Let us apply the contextual classes on our mark sheet table to see them on action. Below code applies “table-active” class to the first row of the table to change the background color to light grey.

Colored Rows with Background Colors

Similar to table contextual classes, you can apply background colors to rows using background contextual classes.

Below is an eye catching table has “bg-success”, “bg-danger”, “bg-warning”, “bg-info” and other background utility classes applied to the rows.

Colored Cells with Contextual Classes

Each cell of a Bootstrap table can be applied with one of the contextual classes to highlight it from other cells. This will be really useful when you have bigger table and wanted to highlight only few cells. Below code shows applying the “table-active” contextual class to a table cell.

Below table has four cells applied with different background colors randomly.

Colored Rows and Cells with Background Colors and Contextual Classes

Finally you can apply table contextual class and background contextual class in any combination to make different background colors for rows and cells.

Here is how the example table will look like with various colors applied for rows and cells.

How To Create Bootstrap 5 Navigation Header? – Webnots

Navigation menu bar is part of each pages on a website. Bootstrap uses the base nav component to create navigation bar (shortly navbar). This helps to create different styles of navigation with the default precompiled component, eliminating the need to code on your own. In this tutorial let us explore on how to create navigation menu bar in Bootstrap.

Navbar component basics

Parts of navbar

Creating standard Bootstrap navbar

Using logo in navbar

Navbar with backgrounds

Navbar with container

Using additional elements in navbar

Showing external content in navbar on toggle

Positioning of navbar component

Bootstrap 4 navbar component uses flexbox to make better alignment of each menu items. By default the menu is responsive using JavaScript collapse component. This essentially means you should include the chúng tôi jQuery and chúng tôi files in your HTML template for the responsive navbar to work.

Navbar by default is fluid occupying the full horizontal width of the layout. You can wrap the entire navbar inside “.container” class to restrict the width to the container or to any pre-defined width.

Unlike many other components, navbar itself is a collection of elements to make it as a package.

Let us create a standard navigation bar without the logo to better understand the navbar component.

The standard navbar contains the following items:

The code will produce the below result on the browser:

Note that we have shown the above navbar code with the complete starter template for easy understanding. For all the below sections, we have only given the navbar code block. You can insert the code block between start and end navbar block of the above code to create a full template.

The above navbar has only a text logo. You can easily add image logo using “.navbar-brand” class. Remember to adjust the height and width of the logo using additional inline CSS like below:

Widgets

It will produce the below result:

Note in the above example, we have used a dropdown menu item and danger button for the search. Basically you can add almost any type of elements on the navbar.

Instead of light text and grey background, you can use light or dark background colors and adjust with “.bg-*” utility classes. For example, below is the example of using dark background color:

Also use one of the background utility classes to change the background color to primary, info, warning, success, secondary, light, dark or danger. Below is an example for danger color background, you may need to use custom CSS in order to make improve the visibility when using different colors.

Change the background to custom color using inline style like below:

The results will be shown like below:

You can also place a container insider the navbar as shown below. In this case the navbar will look more or less similar to standard component as the paddings will be removed automatically.

The result on the browser will look like below:

You can place text, input groups, buttons and any type of elements inside the navbar. Below is an example code for the same:

And here is how it will look:

8. Showing External Content on Toggle

The position of the navbar can be modified by adding addition CSS classes like below

Wrapping Up

You can’t find a website without navigation menu. It helps users to get access to the important pages on your site and users can search using the search box. So, we hope the above Bootstrap 4 navbar tutorial was helpful to learn creating different types of navigation menu for your site.

How To Use Accessibility Features In Google Chrome? – Webnots

Technology may be an exciting experience but not always for some people, especially those with disabilities. Accessibility features such as keyboard access, magnification and screen readers are tools designed to help disabled people to use technology more easily. Google Chrome supports several accessibility features to accommodate users with limited abilities. Moreover, Chrome accessibility features help you to customize your browsing environment to your ideal preferences. This article will show you how you can use some of these features in your Chrome browser.

How to Use Accessibility Features in Google Chrome?

Adjust zoom level

Customize font settings

Keyboard access features

Using Chrome accessibility extensions

Resetting to defaults

Chrome with Windows accessibility

Use Chrome with Mac

Chrome on mobile devices

1. Page Zoom Adjustment

This feature helps to adjust the page zoom level of the current active page.

If you browse without the mouse, you can use the keyboard shortcuts to make the changes:

Increase zoom level by pressing “Ctrl + +” keys.

Decrease zoom level by pressing “Ctrl + -” keys.

“Ctrl + 0” to restore the default zoom level.

“F11” function key for full screen display.

The above method works only on the currently opened webpage and you need to set the zoom level every time. Don’t worry, Chrome also allows you to setup the page zoom level permanently for all the pages.

Go to “chrome://settings” URL and navigate to “Appearance” section.

Now close all open windows and relaunch the browser.

You will see the zoom level is set as per your preference.

Remember, website content may look different at higher zoom level. For example, with horizontal scroll bar. You need to set the level for your eye convenience and for your monitor display.

2. Customizing Font Size and Face

Similar to page zoom level, you can setup the fonts for your reading.

Open Chrome and navigate to “Chrome Menu” and select “Settings” options at the bottom of the menu list.

On the “Settings” page, scroll down and check under “Appearance” section.

Select the “Font size” from the dropdown. Chrome recommends medium level, you can choose large or small as per your convenience.

Modify the font face, size and width to your taste and exit the “Settings” page.

3. Keyboard Access Features

Google Chrome supports full-keyboard accessibility for users who are unable to use pointing devices such as mouse. Some of the navigation keyboard shortcuts:

Use “Shift + Alt + B” to focus the “Bookmarks” bar, then use the “Right or Left” arrow or “Tab” to move across the tool bar.

Press “Shift + Alt + T” to focus the “Main Toolbar”.

Press “F10 or Alt” key to focus on the chrome menu icon and hit “Enter” to expand the menu.

Other helpful navigation shortcuts include:

Shift from the current tab to the next by pressing “Ctrl + Tab” keys.

Close the current tab with “Ctrl + W” keys.

“Ctrl + 1-8” and “Ctrl + 9” to switch to the specified tab number and to the last tab respectively.

“Ctrl + N” to open a new browser window.

Check out more Chrome shortcuts to get your work done quickly.

4. Using Chrome Accessibility Extensions

You can also download and install Chrome Accessibility features.

Type “chrome://settings/accessibility” in the browser address bar and hit enter.

Long Description in Context Menu.

High Contrast.

Color Enhancer.

You may search for more extensions using the search box and install on your browser.

After installing necessary extensions, close the tab and continue browsing.

5. Resetting Google Chrome

When you play around with options on Chrome, it is easy to reset some of the options back to original settings. However, options like font customizations cannot be reverted to the original settings if you do not remember. Fortunately, Chrome allows resetting the browser to default settings.

Go to “chrome://settings”.

Again, scroll down to end of the page.

6. Using Chrome with Windows Accessibility Features

Besides the accessibility features available on Chrome, you can also use the accessibility features available on your computer to enhance the browsing experience. If you use Windows 10 PC, search “PC Settings” from the Windows search box and hit enter to open the Windows settings app. Then select the “Ease of Access” options.

On the left-side panel, select narrator. Toggle on the “Narrator” switch on the right-hand panel and then scroll down to modify other settings to your preference.

Once you have activated the Windows accessibility features, close the settings screen.

Open Google Chrome and starting browsing. The Windows accessibility features will now be active in Chrome.

You can also access “Ease of Access Center” from “Control Panel” and activate the necessary settings on your PC.

7. Using Mac Accessibility Features with Chrome

In addition you can also use other settings like dark mode and night shift to adjust the screen dark or dim compared to light grey. Also you can setup accent colors to easily view the dropdown and title bar.

8. On Mobile Phones

Chrome does not offer any accessibility features on iOS or Android mobile apps. However, you can use the accessibility feature settings available on your phone’s operating system. For example, iPhone with iOS allows you to setup zoom level, smart typing, invert colors, filter colors, etc. You can setup zoom window and see the typed letters in zoom mode using smart typing.

Wrap Up

There are various ways to use the accessibility features in Chrome to enhance usability for users with disabilities. These features can also be useful to customize your browsing experience even when you do not have any visual or hearing challenges. In addition, remember to try out the features on your computer or mobile device to have what you want.

How To Use Cloudflare Dns In Browsers And Os? – Webnots

Cloudflare is one of the popular content delivery networks that offers security and firewall protection for websites. As part of secure and free internet, Cloudflare also offers public DNS service like Google Public DNS. You can make use this Cloudflare DNS to speed up your internet connection especially when your ISP provided DNS is not working for you. You can either configure Cloudflare DNS in your computer or only on the browser depending upon you need.

Why Cloudflare DNS?

There are many public DNS service providers including Google. However, Cloudflare is the best option for the following reasons.

It’s completely free.

It is the fastest domain name resolver to map domain names to IP addresses.

Cloudflare does not collect your usage data and sell to third parties. The data is stored 24 hours for debugging purposes and then automatically purged.

Cloudflare uses the following primary and secondary DNS server IP addresses.

ServerIPv4IPv6Primary or Preferred1.1.1.12606:4700:4700::1111Secondary or Alternate1.0.0.12606:4700:4700::1001

You can use one of the below methods to use Cloudflare DNS for your network.

1. Setup Cloudflare DNS in Windows 11

Press “Win + I” shortcut keys and open Windows Settings app.

Go to “Network & internet” section and select your active network connection. In my case, I will select “Ethernet” option.

Select Active Network Connection in Windows 11

Edit DNS Server Assignment in Windows 11

Select “Manual” option from dropdown and enable “IPv4”.

Select Manual and IPv4

Enter 1.1.1.1 in “Preferred DNS” box and select “On (automatic template)” option for “DNS over HTTPS” option. You will see the Cloudflare template address shows automatically in “DNS over HTTPS template” box.

Enter Cloudflare Primary IPv4 DNS in Windows 11

Scroll down and type the “Alternate DNS” as 1.0.0.1. Select automatic template for “DNS over HTTPS” option.

Enter Cloudflare Alternate DNS in Windows 11

2. Use Cloudflare DNS in Mac

The latest macOS version has a Settings app where you can manage the DNS servers.

View Network Details in macOS

Go to “DNS” section to view your current DNS server IP addresses.

Add Cloudflare DNS in macOS

3. Cloudflare DNS in Chrome

Chrome offers an option to use secure DNS over HTTPS connection instead of your computer’s setup. With this, it is possible to use public DNS like Cloudflare DNS.

Open Chrome and go to chrome://settings/privacy page.

Chrome Privacy Settings

Go to “Advanced” section and enable “Always use secure connections” option to force HTTPS.

Chrome by default uses your ISP DNS servers, to change that first turn the switch on against “Use secure DNS” option.  

Enable Secure HTTPS and DNS in Chrome

Select “Cloudflare (1.1.1.1) to use Cloudflare DNS on Chrome.

Set Cloudflare DNS in Chrome

4. Use Cloudflare DNS in Firefox

Follow the below steps if you are using Firefox in Windows or Mac.

Open Firefox and go to about:preferences#general page (check the complete list of about: pages in Firefox).

Firefox Network Settings

This will open “Connection Settings” pop-up and scroll down to bottom on the pop-up.

Check “Enable DNS over HTTPS” option and select “Cloudflare (Default)” option from the dropdown. 

Enable Cloudflare DNS OVer HTTPS in Firefox

5. Enable Cloudflare DNS in Edge

Edge has similar settings like Chrome as both browsers use the same Chromium backend.

Open Edge and go to edge://settings/privacy page.

Scroll down on the right side and enable “Use secure DNS to specify how to lookup the network address for websites” option under “Security” section.

After that, select “Choose a service provider option”.

Enable Cloudflare DNS in Edge Browser

Note: You will see “The setting is turned off for managed browsers” if your browser is managed by your organization or network administrator. You should contact the administrator to unlock the setting for you.

6. Cloudflare DNS Setup on iPhone and Android

Most browsers do not offer an option to use Cloudflare DNS in mobile apps. So, you need to manually change the DNS setup and assign the primary and secondary server IP addresses as given in the above table. Learn more on how to change DNS servers in Android and iOS.  

Final Words

Changing system DNS setup will route all your network connections through Cloudflare DNS. If you only want to use it for browsing purposes, then configure only in your browser (Chrome, Firefox or Edge). On Mac and mobile devices, you need to change the system DNS as the browsers do not support app level setup.

How To Use Siteground Site Scanner To Protect Your Site? – Webnots

Unlike other hosting companies, SiteGround offers bunch of security and performance features for their users. Though some features like SG Optimizer are free, you need to pay for other features like Site Scanner. If you worry about malware infection and want to protect your site, then Site Scanner is premium option you can choose instead of going for third-party solutions. In this article, I will explain how to purchase Site Scanner, configure the setup and scan your site.

Site Scanner Vs Other Solutions

SiteGround recommends two solutions for malware protection – Site Scanner and Sucuri. While Site Scanner also uses Sucuri services, the difference is that you can purchase it within SiteGround hosting account. Otherwise, you need to purchase Sucuri from their site outside of SiteGround hosting account. Other than that, you have many security plugins for WordPress sites and services like Cloudflare for this purpose. The good part with Site Scanner is that you can get 50% discount in the first-year price and is still cheap compared to other solutions. In addition, this is an in-house solution from SiteGround and hence you can manage all stuffs in single place. You will get the following features with Site Scanner premium plan.

URLs, files and check domain blacklist scans.

Daily automatic scan and check the status for past 30 days.

Email alert when threats are found and weekly status email.

Scan all uploaded files and quarantine infected files outside root of the domain.

Purchasing Site Scanner in SiteGround

Follow the below steps to buy Site Scanner service:

SiteGround Site Scanner Service

Select Site in Hosting Account

This will take you to the pricing plan page. Site Scanner is available under two plans – Basic and Premium. The basic plan does not offer file quarantine, scan on upload and comprehensive scan features. If you are frequently uploading files or allowing users to upload files on your site, then go to premium plan. For the first year, basic plan will cost you $2.49 per month and premium plan will cost you $4.99 per month. As mentioned, this is a 50% discounted rate and you will be charged double the rate from second year onwards.

Site Scanner Basic and Premium Comparison

Purchase Premium Site Scanner Plan

Site Scanner Order Finished

Scanning with Site Scanner

Site Scanner will scan your site on daily basis and notify you in case of any threats detected. In addition, you can manually scan the site anytime from Site Tools.

Go to Site Tools section of the site for which you have purchased Site Scanner.

Start Scanning with Site Scanner

In case of any threats detected, you can quarantine the files (need premium plan) or delete them to clean up the site. Otherwise, you will see a success message showing scan completed and no threats are detected.

Manual Scan Completed with No Threats

Check Daily Scan Reports

Note that there are no options to set the time for daily scan schedule. This is done automatically in the background on predetermined time similar to automatic backup setup in SiteGround. You can find the time next to each report result. If it is a peak time of traffic for your site and you notice any slowdown, discuss with their support team to check whether they can change the schedule to another time.

Configuring Site Scanner

The “Manage Site Scanner” section has four sections. You can find the scan results for the past 30 days under “Reports” and enable email alert under “Notifications” sections. Go to “Quarantine” section and turn on the option if you want to quarantine the affected files. This is useful to separate the files from the root domain thus protecting your site.

Disable FTP – if you do not use FTP accounts or worry about someone remotely accessing your site then enable this option. Remember, this will disable all existing FTP accounts and you will not be able to access the site remotely through clients like FileZilla.

Disable SSH – turn on this to disable SSH and SFTP access.

Manage Site Scanner Settings

Disable PHP Upload – this will prevent uploading PHP files on your site. If you are using WordPress, make sure to disable this option. Otherwise, you will not be able to install/upload themes and plugins from admin panel as plugins/themes contain PHP files  to work properly.

Disable execution of shell commands via PHP – enabling this will prevent PHP functions to run server commands. Again, you may need to disable this for the PHP functions to work properly.

The options under “Site Protect” sections are meant for isolating your site when under attack. If you feel something is suspicious on your site, enable all these options and take your site offline for troubleshooting and fixing the issue.

Weekly Protection Email

Site Scanner will send a weekly security status to the email you have setup in “Notifications” section. It will show you the overall status along with details of URLs and files quarantined in case of infection.

Email from Site Scanner

Final Words

If you have received malware warning notification from Site Ground, you can request for a free scan without purchasing Site Scanner service. However, you can purchase premium Site Scanner plan for protecting your site permanently from infectious files. You can get a week email about the protection status and have peace of mind to focus on other protective tasks.

Update the detailed information about How To Use Bootstrap 5 Grid Layouts? – Webnots on the Achiashop.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!