Skip to content
Submitted almost 4 years ago

Mobile first trying out Bootstrap CDN for the first time

Jeremy Ng•200
@lanechanger
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi all,

Thanks for checking out my solution. As the title suggests, I'm trying out Bootstrap for this one using the CDN rather than using the files directly so my questions will mostly be around BS.

  1. Firstly, have I "successfully" applied Bootstrap? I find that if I want to get nitpicky with specific sizes then I need to deviate from their classes. (e.g. their margin and padding utilites are based around specific multiplier of their $spacer variable) Or have I defeated the purpose of using Bootstrap by writing my own specific spacing and font sizes and whatnot?

  2. Is it possible to customize Bootstrap (e.g. the $spacer and other variables) while using the CDN or is that reserved only if you have downloaded the source files or installed Bootstrap through something like npm? When I read their customize documentation it seems to imply the latter.

  3. Is there a best practice for ordering class names as one of the problems I have with using BS is that the HTML file starts to get very crowded with classes. Something like this for instance:

<div class="footer-social d-flex justify-content-center justify-content-lg-end"> Is there a best practice ordering for better readability like put your own custom classes first (footer-social), then layout classes (d-flex, justify-content..), then width/height then styling like text/color?
  1. I don't love the way that I'm centering my icons vertically which is mostly by setting line-height = height. I tried wrapping the icons with a flex container and centering the icon within. Also tried wrapping the icons with a relative div and setting the icons to absolute to do top/left 50% transform centering but neither worked. Not sure what I'm missing here.

If you made it this far, thanks again for your time!

Community feedback

  • Grace•31,230
    @grace-snowPosted almost 4 years ago

    Hi

    It looks to me like you're overriding bootstrap more than you need to, especially setting a lot of paddings and font sizes in multiple media queries.

    Instead, if you set a max width on the content inside the body, and used clamp font sizes you could get the same effect in far less code. Just an idea... This looks great how it is so you may not want to mess with it when it's all working and looking good as it is.

    Unfortunately you cannot override bootstrap variables when accessing via cdn. I always find it hard to know how to override bootstrap variables as there's just so darn many of them!

    With your icons I would've thought there would be a bootstrap class to align-items / align-self center? I know you have to be careful using their utility classes though as I think they slap !important on e erything.

    But overall I'm not the best person to advise on bootstrap usage. I can't stand it as its sooooo overly specific due to heavy nesting, and the variables are a complex network. I have to use bootstrap on a solo project at work this week and dreading it to be honest - it would be a lot quicker doing it all myself 😂

    Maybe try tailwind next if you're trying out frameworks, or Bulma. They all take different approaches and there's pros n cons with each

    2
    Jeremy Ng•200
    @lanechangerPosted over 3 years ago

    @grace-snow Thanks as always Grace :) I didn't love the way that I handled the font sizes so maybe I'll branch out and try your suggestion!

    Ok that confirms what I suspected about overriding variables, good to know! I'll try BS with the source files next time I decide to re-visit BS.

    Hmm there may be BS classes for that, I might have missed that part of the doc. I'll take a look again. Oh man, one of the first things I learned about CSS is not to use !important so it does bug me that BS uses so many !importants with their classes.

    Good luck with your BS project! :D

    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hi there, Jeremy Ng! 👋

    Good to see you complete another challenge! 😀 Your solution looks pretty great and is responsive! 👏

    I don't know very much about Bootstrap, but a tiny design tip that might improve your solution would be to add a max-width to the content of the page to prevent it from becoming too wide on extra-large screens. 🙂

    Keep coding (and happy coding, too)! 😁

    1
    Jeremy Ng•200
    @lanechangerPosted over 3 years ago

    @ApplePieGiraffe Heya APG, I only just now realized you commented on my 4 cards solution as well, thanks for checking this out too! And between that comment and this one and the one Grace posted above, it is clear that I'm under-utilizing the max-width property and will re-visit it. Thanks for the tip! :D

    p.s. I totally stalk your solutions and enjoy the animations you add to each solution to make them stand out! XD

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @lanechanger

    Haha, TY! 😊

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord