Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN (Bootstrap 4)

Sunday, June 19, 2016

CSS: Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN (Bootstrap 4)

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com

 Brief Introduction:

 Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on!

 Okay class here goes:

 Mobile-First Design:  You design your site for mobile devices first so the desktop version is second class citizen.


 Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold.

 So to setup Bootstrap, you will do the following:

1. Create an HTML5 page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

2. In the element add the following four lines
  • <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    This the jQuery library that Bootstrap needs
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
    his is the popper JavaScript library that Bootstrap needs
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">
    his is the Bootstrap JavaScript library
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    This is the Bootstrap stylesheet
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Optional theme -->
        <title></title>
    </head>
    <body>
        
    </body>
</html>
That's all there is to it, now you should be all set to go with Bootstrap. There's one thing that could throw you off when setting up Bootstrap. It might require you to have a certain version of jQuery to work. So you have to experiment a little bit with the jQuery version to make it work. I found that the jQuery version that I linked to works with the latest version of Bootstrap. But that might change in the future as Bootstrap releases new versions.

Previous: CSS Grouping Selectors
Next: CSS: Using Bootstrap To Make Your Form Fields Look More Professional

13 comments:

  1. Rathore Villa Novel by Sidra SheikhMay 28, 2021 at 7:32 AM

    thanks for sharing nice post

    ReplyDelete
  2. do my homework cheapOctober 15, 2021 at 3:54 AM

    Thanks for discussing this particular wonderful subject material on your web-site. I discovered it on the internet. I am going to check back again whenever you post additional aricles.

    ReplyDelete
  3. vé máy bay từ canada về việt namNovember 8, 2021 at 8:54 PM

    Mua vé tại Aivivu, tham khảo

    ve may bay di my gia re

    vietnam airlines quốc tế

    đặt vé máy bay từ đức về việt nam

    chuyến bay từ nga về việt nam

    giá vé máy bay từ anh về việt nam

    mua vé máy bay giá rẻ từ pháp về việt nam

    vé máy bay chuyên gia nước ngoài

    ReplyDelete
  4. Online Duplicate BillsJanuary 25, 2022 at 2:51 AM

    pinterest image downloader

    ReplyDelete
  5. Shawn AbiJuly 18, 2022 at 5:28 AM

    Thin pants, straight-leg and other thin fit cuts are ideal while Boyfriend pants, flares and '90s skater styles are better matched. A layer of your Will Graham Hannibal Hugh Dancy Jacket printed T-shirt is the ideal outfit that makes a denim coat and stockings simply that piece more perfect and jazzy.

    ReplyDelete
  6. EssayEmpire.Co.UKJuly 19, 2022 at 5:11 AM

    We esteem each paper author working for us, thusly we request that our clients put finances on their equilibrium as verification of having installment capacity. Would be a pity for our journalists not to get fair compensation. We likewise need to console our clients of getting a quality paper, in this manner, the assets are set free from your equilibrium just when you're 100 percent fulfilled.

    ReplyDelete
  7. online gift delivery in pakistanJuly 28, 2022 at 3:52 AM

    Send your cherished Gifts like Chocolates, Heart Shaped cakes, Velvet cakes, Teddy Bears, Jewelry, Necklaces, Earrings, or Rings to Pakistan.

    ReplyDelete
  8. Assignment Writing Help UkOctober 14, 2022 at 3:55 AM

    Some websites charge a fee for access. This can be a good option if you have a lot of homework to do, or if you have a very busy schedule. These websites often have a large number of assignments available. Some of them also allow you to share your assignments with other users.

    ReplyDelete
  9. ShoplecticMay 28, 2023 at 8:41 AM

    It would be unfortunate if our writers weren't fairly compensated. The assets are deducted from your account just after you are completely satisfied in order to reassure our customers that they received a high-quality paper. Shoplectic

    ReplyDelete
  10. wensonApril 18, 2025 at 12:31 PM

    To set up Bootstrap 4 using the CDN, add the following links to your HTML file's section: the CSS link for Bootstrap’s styles and the JavaScript links for functionality. This method avoids local installation, ensuring fast setup and access to the latest Bootstrap features directly from the CDN. Visit now: minecraft mod apk download








    ReplyDelete
  11. Books Reading LoverMay 21, 2025 at 7:44 AM

    Discover why your tires fail when you need them most in this insightful article on the science of traction—a must-read for every driver.

    ReplyDelete
  12. daniel lisaJune 4, 2025 at 9:41 AM

    Haramase Simulator 0.4.0.3 is a niche simulation game that has gained attention for its adult-themed gameplay mechanics. While the game itself focuses on interactive storytelling and simulation elements, players often customize characters and environments to enhance immersion. Interestingly, in communities discussing Haramase Simulator 0.4.0.3, there’s growing interest in character customization that includes unique fashion styles—such as plus size rave outfits—to diversify character appearances and celebrate body positivity within the game’s world. This shows how even simulation games can embrace inclusivity by allowing a wider range of character styles, including vibrant and bold fashion choices like plus size rave outfits, making the experience more relatable and visually appealing for many players.

    ReplyDelete
  13. daniel lisaJune 4, 2025 at 9:43 AM

    Could you please clarify what you mean by "Organic point"? Are you asking about:

    The meaning of "organic point" in a specific context (like marketing, SEO, biology, or something else)?

    How to create or improve an organic point (e.g., an organic traffic point or natural talking point)?

    Something else related to "organic" or "points"?

    Let me know a bit more so I can give you the best answer!

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog