0

My cms page :

content:

<div class="container">
        <div class="list-group-item list-group-item-success"><h1>giri.in</h1></div>
        <div class="row jumbotron" style="padding-left: 10px;">

            <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>   

        <div class="list-group-item list-group-item-success"><h1>giriusa.com</h1></div>

        <div class="row jumbotron" style="padding-left: 10px;">
            <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> 
        <div class="list-group-item list-group-item-success"><h1>giriaus.com</h1></div>

        <div class="row jumbotron" style="padding-left: 10px;">
            <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>     
    </div> 

Content -> Layout Update XML :

<reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/social/bootstrap.min.css</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/social/compiled.min.css</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/social/font-awesome.min.css</name><params/></action>

    <action method="addItem"><type>skin_css</type><name>css/fonts/FontAwesome.otf</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/fonts/fontawesome-webfont.woff2</name><params/></action>
   <action method="addItem"><type>skin_css</type><name>css/fonts/fontawesome-webfont.woff</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/fonts/fontawesome-webfont.ttf</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/fonts/fontawesome-webfont.svg</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/fonts/fontawesome-webfont.eot</name><params/></action>

    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Regular.woff2</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Regular.woff</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Regular.ttf</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Light.woff2</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Light.woff</name><params/></action>
    <action method="addItem"><type>skin_css</type><name>css/font/roboto/Roboto-Light.ttf</name><params/></action>
</reference>

In my custom cms page Header alignment collapsed.

  • Can you please share screenshot? – KKR Jul 29 at 6:12
  • @KKR Home page -> snag.gy/KgfUpN.jpg CMS page -> snag.gy/bGDhnm.jpg – zus Jul 29 at 6:30
  • It seems like it is issue of css. can you please check css of header for both pages. – KKR Jul 29 at 6:36
  • @KKR How to add bootstrap in cms page. My custom cms page ready, looking good in system view, how to add bootstrap? – zus Jul 29 at 9:31
  • you need to add bootstrap to your project so that you can able to use its properties. – KKR Jul 29 at 9:43

Your Answer

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

Browse other questions tagged or ask your own question.