Customization of the theme

@ugintl
The initial basic steps are as -

1. Create Sub Theme
2. Create Template of Front-page
3. Create library and attach in Front-page template

Thanks @ravi-kant for the quick response.

@ugintl you can follow the steps.

• Create a Sub Theme, Go through the Readme.md file for the Sub-theme creation steps.
• Go to the FlexiStyle Bootstrap theme, copy the components folder and page.html.twig from the templates folder, and paste it into your custom theme templates folder.
• If you want to customize the Front page, clone the page.html.twig into the page--front.html.twig.
• If you have minor CSS changes then you can add them directly into the style.css file.
• If you want to add a separate CSS file for the front-page, Then you can add a new library in your themes libraries file.

Create a Library in your custom theme libraries file such as.

# Front Page Library
front_page:
  css:
    component:
      css/front.css: { }

Attaching a library via a Twig template

You can attach an asset library to a Twig template using the attach_library() function in your page--front.html.twig.
{{ attach_library('custom_theme/front_page') }}

Attach the Library in the Preprocess Function for the Front Page

use Drupal\Core\Url;

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function custom_theme_preprocess_page(array &$variables) {
  // Check if the current page is the front page.
  if (\Drupal::service('path.matcher')->isFrontPage()) {
    $variables['#attached']['library'][] = 'custom_theme/front_page';
  }
}

Note: "custom_theme" replace it with your custom theme name.

Thank you @anoopsingh92 this is exactly the answer I was looking for. May you have a prosperous career.

Automatically closed - issue fixed for 2 weeks with no activity.