Using Bootstrap frame work on cumulusclips

Good evening I was running to an issue where i was trying to implement a bootstrap frame work for my webpage however when i put the code in the source code section, it doesnt update the new style it. Has anyone used bootstrap frame work on their projects? thanks in advanced

Comments

  • It should work. All of the custom themes available use Bootstrap 3.
  • I could be inputing my source code in wrong, but when i go to getbootstrap.com and grab their source code and put it in my code it still doesn't apply to the webpage when i update it and preview it.
  • Post your code snippets here so that we can see if there is anything that can be corrected
  • Were trying to test out new pages with bootstrap but when we put the link in the body it deletes it. What are your suggestions for us to test out the pages?
  • edited August 7
    Without seeing the code it's difficult to say. What version of Bootstrap are you trying to import? Also are you linking a pre-built version or are you building it from source?
  • Here is my code that I am trying to use on a new webpage
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Student Handbook</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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">
    </head>
    <body>
    <div class="jumbotron text-center">
    <h1>Student Handbook</h1>
    </div>

    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4">
    <center><h3>Academic Catalog</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/HQO89jgaTP3lwmbhlK48.pdf" target="_blank">2018-2019 Academic Catalog (.pdf)</a></span></p></center>
    </div>
    <div class="col-md-4 col-sm-4">
    <center><h3>Academic Calendars</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/r1khdxP5rUPnejX10DTz.pdf" target="_blank">2019-2020 Academic Calendar</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/jfDhjGyb8r3320H8sWPo.pdf" target="_blank">2018-2019 Academic Calendar (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4">
    <center><h3>Academic Course List</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/yTsVfebGMoTxpN5HErcf.pdf" target="_blank">2019 Fall Course List (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/AEFAk9L2CGIs5rnwtnVs.pdf" target="_blank">2019 Summer Course List (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/gDD4pAHm4MwfQhb9uFfP.pdf" target="_blank">2019 Spring Course List (.pdf)</a></span></p></center>
    </div>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4">
    <center><h3>Business Office</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/apkXTMuWfVFmguBSnX3H.pdf" target="_blank">Bi-Weekly Student Payroll Schedule (.pdf)</a></span></p></center></div>
    <div class="col-md-4 col-sm-4">
    <center><h3>Education</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/fsFxgT1aWv7qHR56ySEj.pdf" target="_blank">2017-2018 Education Student Handbook</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/0vZmpc8od7nBOJh4J9jE.pdf" target="_blank">2018-2019 Student Teaching Handbook Elem Sec DL</a></span></p></div>
    </center>
    <div class="col-md-4 col-sm-4">
    <center><h3>Final Exam Schedule</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/DecoBYgp69MEZMTCn3eO.pdf" target="_blank">2018 FA &amp; SP Final Examination Schedule (.pdf)</a></span></p></div>
    </center>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4">
    <center><h3>Health and Safety Guides</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="https://www.wmpenn.edu/wp-content/uploads/2019/05/William-Penn-Summary-5.8.19-DM-002.pdf" target="_blank">19-20 Health Insurance Brochure (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/BDxF6GM5OrPYO1j8NfZb.pdf" target="_blank">18-19 Health Insurance Brochure (.pdf)</a></span></p></center></div>
    <div class="col-md-4 col-sm-4">
    <center><h3>Housing</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/FqWWeWVucGeE22yOp7Et.pdf" target="_blank">2017&ndash;2018 Residence Life Handbook (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/1HXf8qkZXEGHnaCWInFs.pdf" target="_blank">2018&ndash;2019 Residence Life Handbook (.pdf)</a></span></p></center></div>
    <div class="col-md-4 col-sm-4">
    <center><h3>Policies and Procedures</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/r7mMN1IvgsHiL1GGfV4J.pdf" target="_blank">2018-2019 Student Handbook (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/lsSsUHz3npGyG1TyRWtq.pdf" target="_blank">WPU Posting Policy (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/cykRVgHbOh8Ik6e6XzgQ.pdf" target="_blank">WPU Social Media Policy (.pdf)</a></span></p>
    </center>
    </div>
    </div>
    </div>
    <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>
    </body>
    </html>

    Insert Code View.JPG
    1701 x 807 - 91K
  • In the picture above is the view of the page after I insert the code, the layout looks good but after I press update page my website than looks like this when I press preview.

    Also this is my code after the page has been updated.

    <p>Student Handbook</p>
    <div class="jumbotron text-center">
    <h1>Student Handbook</h1>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4"><center>
    <h3>Academic Catalog</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/HQO89jgaTP3lwmbhlK48.pdf" target="_blank">2018-2019 Academic Catalog (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Academic Calendars</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/r1khdxP5rUPnejX10DTz.pdf" target="_blank">2019-2020 Academic Calendar</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/jfDhjGyb8r3320H8sWPo.pdf" target="_blank">2018-2019 Academic Calendar (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Academic Course List</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/yTsVfebGMoTxpN5HErcf.pdf" target="_blank">2019 Fall Course List (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/AEFAk9L2CGIs5rnwtnVs.pdf" target="_blank">2019 Summer Course List (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/gDD4pAHm4MwfQhb9uFfP.pdf" target="_blank">2019 Spring Course List (.pdf)</a></span></p>
    </center></div>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4"><center>
    <h3>Business Office</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/apkXTMuWfVFmguBSnX3H.pdf" target="_blank">Bi-Weekly Student Payroll Schedule (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Education</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/fsFxgT1aWv7qHR56ySEj.pdf" target="_blank">2017-2018 Education Student Handbook</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/0vZmpc8od7nBOJh4J9jE.pdf" target="_blank">2018-2019 Student Teaching Handbook Elem Sec DL</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Final Exam Schedule</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/DecoBYgp69MEZMTCn3eO.pdf" target="_blank">2018 FA &amp; SP Final Examination Schedule (.pdf)</a></span></p>
    </center></div>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-md-4 col-sm-4"><center>
    <h3>Health and Safety Guides</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="https://www.wmpenn.edu/wp-content/uploads/2019/05/William-Penn-Summary-5.8.19-DM-002.pdf" target="_blank">19-20 Health Insurance Brochure (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/BDxF6GM5OrPYO1j8NfZb.pdf" target="_blank">18-19 Health Insurance Brochure (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Housing</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/FqWWeWVucGeE22yOp7Et.pdf" target="_blank">2017&ndash;2018 Residence Life Handbook (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/1HXf8qkZXEGHnaCWInFs.pdf" target="_blank">2018&ndash;2019 Residence Life Handbook (.pdf)</a></span></p>
    </center></div>
    <div class="col-md-4 col-sm-4"><center>
    <h3>Policies and Procedures</h3>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/r7mMN1IvgsHiL1GGfV4J.pdf" target="_blank">2018-2019 Student Handbook (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/lsSsUHz3npGyG1TyRWtq.pdf" target="_blank">WPU Posting Policy (.pdf)</a></span></p>
    <p style="padding-left: 30px;"><span style="font-size: 12pt;"><a href="../cc-content/uploads/files/library/cykRVgHbOh8Ik6e6XzgQ.pdf" target="_blank">WPU Social Media Policy (.pdf)</a></span></p>
    </center></div>
    </div>
    </div>
    <p>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    </p>
    preview.JPG
    1505 x 838 - 101K
  • edited August 7
    I understand now. What you are trying to do will not work as expected. You are using a DB driven page from the Admin Panel.

    The content you are saving includes an HTML, Head, and Body tag. That content will get inserted into the body of the final page that gets generated. The final page already has an HTML, Head, and Body tag of it's own thus causing conflicts with the ones you are adding.

    I'm not sure if adding CSS link and JS script tags will translate into the appropriate tags when the DB page is rendered. However you can try the following. Take the HTML content you posted in your second snippet above, the one that exists after the page is updated. Append to the beginning of that the Bootstrap CSS link:

    <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">
    Save and try it out. Additionally, you are attempting to include jQuery v3 while the theme already has version 1.x. I have a feeling that will cause problems. If it does, you can omit the jQuery include line from your snippet and see if it works using the theme's version 1.x.
Sign In or Register to comment.