2

I had created a page with bootstrap classes but those styles are not applying for ref please find the below URL.

https://icontiles.co.uk/delivery-status

please find the below code also

<table class="table table-bordered table-striped mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

here the problem is these styles are not applying table-bordered table-striped

Improve this question

1 Answer 1

Reset to default
1

For adding Bootstrap 4 In Magento(tested) & in your custom theme, follow the below steps:

  1. Bootstrap CSS files inside the web folder

Note:

THEME_LOCATION => app\design\frontend\vendor-name\theme-name\ Call bootstrap css files in default_head_blocks THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Adding css

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!--Bootstrap css-->
        <css src="css/bootstrap.css" />
    </head>
</page>
  1. Adding Js files in bundle form rather than individual because the individual doesn't work Place bootstrap.bundle.js files can download from here: https://getbootstrap.com/docs/4.0/getting-started/download/

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js Call Bootstrap Js Into requirejs-config.js THEME_LOCATION\Magento_Theme\requirejs-config.js

code for

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

Add below code in header.phtml after your already present script tag

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Code: <script type="text/javascript">require(['bootstrap']);</script>

Run Below Commands:

php bin/magento setup:static-content:deploy

(Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.