0

Here is my cms page code,

    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://mdbootstrap.com/legacy/4.3.2/assets/compiled.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" id="bootstrap-css">
<title>Social Media </title>


<div class="container">
    <div class="list-group-item list-group-item-success"><h1>abc</h1></div>
    <div class="row jumbotron">

        <div class="col" >

            <button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</button>
        </div>        

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>
        </div>
    </div>        
    <div class="list-group-item list-group-item-success"><h1>abc</h1></div>

    <div class="row jumbotron">
        <div class="col">
            <button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</button>
        </div>        

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>
        </div>
    </div> 
    <div class="list-group-item list-group-item-success"><h1>abc</h1></div>
    <div class="row jumbotron">
        <div class="col">
            <button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</button>
        </div>        

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</button>
        </div>

        <div class="col">
            <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>
        </div>
    </div>     
</div>               




<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The code working good, but page header looks like unalignment.

0

You can not use Html and body tag in cms page. if you want to use make sure that you have selected empty layout.

You can add CSS in the Design section. Below is the code for the same.

<head>
        <css src="https://mdbootstrap.com/legacy/4.3.2/assets/compiled.min.css" src_type="url"/>
        <css src="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" src_type="url"/>
    </head>
  • pls check with my updated post, still getting same error. – aveevan Jul 26 '19 at 5:19
  • Where i can save external css file to magento and call from cms page? – aveevan Jul 26 '19 at 5:19
  • is right js, <js src="code.jquery.com/jquery-3.3.1.slim.min.js" src_type="url"/> ? – aveevan Jul 26 '19 at 7:23
  • after applying the above code, CSS not reflect on the front end, – aveevan Jul 26 '19 at 7:32
  • its working fine for me make sure you clear cache and add all CSS which you required. – poojan sharma Jul 26 '19 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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