How to add bootstrap css to Magento 2 theme | Magento Developer's Diary

what I need to do is to include bootstrap to my theme (currently i'm working on luma theme) to customized it in my own requirement . later on I will use blank theme.let's start

May be this is wrong way to do but I do this way. Comments are welcomed to correct me.

Preconditions:

1. Magento 2.2.0 installed with sample data (luma & blank theme) 

Expected Layout: 

Result: 

add my css to file My_Magento2_folder(m2)/pub/media/style.css


.half-web{
padding:0; margin:5px 0px; width:100%; height:359px;
background-color:#ccc; display:block;
} .full-web{
padding:0; margin:5px 0px; width:100%;
height:200px; background-color:#bec894; display:block;
} .container { padding-right: 5px; padding-left: 5px; margin-right: auto; margin-left: auto; } .row { margin-right: -5px; margin-left: -5px; } .col-xs-1, .col-sm-1, .col-md-1, { position: static; min-height: 1px; padding-right: 5px; padding-left: 5px; }

and html design on homepage block in backend

<div class="blocks-promo">

<div class="block-promo-wrapper block-promo-hp"><img src="{{media url="wysiwyg/slider2.jpg"}}" alt="" />

<div class="container">

<div class="row">

<div class="col-md-6">

<div class="row">

<div class="col-md-6"><a class="half-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-pants.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

<div class="col-md-6"><a class="half-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-performance.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

<div class="col-md-12"><a class="full-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-t-shirts.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

</div>

</div>

<div class="col-md-6">

<div class="row">

<div class="col-md-12"><a class="full-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-eco.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

<div class="col-md-6"><a class="half-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-erin.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

<div class="col-md-6"><a class="half-web" href="{{store url=""}}collections/yoga-new.html"> <img src="{{media url="wysiwyg/home/home-pants.jpg"}}" alt="" /> <!-- <span class="content bg-white">

                                                   <span class="info">New Luma Yoga Collection</span>

                                                   <strong class="title">Get fit and look fab in new seasonal styles</strong>

                                                   <span class="action more button">Shop New Yoga</span>

                                             </span> --> </a></div>

</div>

</div>

</div>

</div>

</div>

</div>

I added bootstrap class to my html now need to include bootstrap file to luma theme.

I placed (bootstrap.css)  file  download file from here  in following folders

/app/design/frontend/vendor-name/theme-name/web/css

/app/design/frontend/vendor-name/theme-name/web/js

Call files in your default_head_blocks.xml (app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml)

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

I only placed css files only as I needed to change include bootstrap css file only
then use these command

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

luckily succesfully include bootstrap css 

This is what I tried to do today. Hope help somebody
Next I will try to do followings :  before that I will create new theme

1.Add image slider instead of static banner image.

2. Add product slider

3. Add  custom html code (design ) homepage block 

4. Custom static block
5. Change add to cart button & Home layouts 

Let's see How far I can go.