Bootstrap: AdHoc Project Step 21-- Backwards Day

Every time I think of Bootstrap makes me feel like a Pirate :pirate_flag: especially since Pirates of the Caribbean had Bootstrap Bill Turner but I digress…

I’m calling this backwards day because I decided to make the card part a carousel and the carousel a card part. My thought process was:

  • I feel like the offerings needed to be more dynamic whereas the people part tells a better human story of the company.

Obvs I decided to take up the Academy on Step 21 of the redesign of the AdHoc page that is the last project in the unit. Pretty much smooth sailing only I decided to get too big for my britches and instead of using the cute icons as the bits of my carousel I went a plunderin’ to Pixabay to use images instead:

And wouldn’t you know it it the “Fun” image that is causing me a world of headache. I’ve gotten the other two to look normal at any size but the balloon image INSISTS on being a slighly bigger image in the carousel. Now I know if I actually owned these images I would just resize them and ect… But I feel there must be an inline work around to make it work. said in my best Tim Gunn impression

I commented the steps so you could sort of step into the chaotic mess that is my brain.
The Bootstrapping:

html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>Adhoc</title>
</head>

<body>
    <!-- Navbar Component -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!--Step 3: Adding the Adhoc Logo to Nav-->
    <a class="navbar-brand" href="#"><img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/logo.png" alt="The adhoc team logo"/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
<!--Step 4: Links-->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Jumbotron -->
  <!-- Step 5 Jumbotron and Jumbotron Fluid-->
  <div class="jumbotron jumbotron-fluid" style="background:url(https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/jumbotron.png) no-repeat; background-size: cover;">
  <!--Step 6: Div and Bits-->
  <div class="bg-secondary text-center text-white my-5">
    <h1 class="display-3 mb-3">Admin Made Easy</h1>
    <p>Ad Hoc is an On-Demand Administrative Service for Your Company Growth</p>
   </div>  
</div>

  <!-- Container -->
  <div class="container">
    <!-- Quote Section -->
    <div class="row">
      <!-- Step 8: Styling the Quote-->
      <div class="col my-5">
        <h2 class="font-italic font-weight-light">"Thanks to Adhoc we now have beautiful and faithful service every
          day. Our customers are happy and engagement has drastically increased. Highly recommend!"</h2>
        <p class="text-right font-italic font-weight-bolder">-Dave Ellavar, <span class="font-italic font-weight-light">Academy of Code</span></p>
      </div>
    </div>
    <hr>
    
    <!-- Why Adhoc? Text -->
    <div class="row">
      <div class="col">
        <!-- Step 9: Why Adhoc? Styling-->
        <h2 class="text-center display-4 mb-3">Why Adhoc?</h2>
      </div>
    </div>
<!-- Step 17 Carousel-->
    <div class="row">
      <div class="col">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner my-5">
    <div class="carousel-item active">
     <!--Step 19:Style Max Height-->
      <img src="https://cdn.pixabay.com/photo/2018/09/04/10/27/learn-3653430_960_720.jpg" class="d-block w-100" alt="9000 Happy Clients" style="max-height:100vh;"/>
      <div class="carousel-caption">
        <!--Step 18-->
        <h5 class="bg-secondary text white rounded-pill">Experienced</h5>
        <p class="bg-secondary text-white font-weight-light rounded">Over 9000 happy clients and we learn something new from each one.</p>
     </div>
</div>
    <div class="carousel-item">
      <img src="https://cdn.pixabay.com/photo/2016/11/29/13/20/balloons-1869790_960_720.jpg" class="d-block w-100" alt="We Make It Happen." style="max-height:100vh;"/>
      <div class="carousel-caption">
        <h5 class="bg-secondary text-white rounded-pill">Fun</h5>
        <p class="bg-secondary text-white font-weight-light rounded">Administration Fun? Yeah, somehow we make it happen.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://cdn.pixabay.com/photo/2019/09/29/22/06/light-bulb-4514505_960_720.jpg" class="d-block w-100" alt="Innovative Solutions" style="max-height:100vh;"/>
      <div class="carousel-caption my-3">
        <h5 class="bg-secondary text-white rounded-pill">Smart</h5>
        <p class="bg-secondary text-white font-weight-light rounded">Innovative solutions to the trickiest of everyday tasks.</p>
     </div>
   </div>
</div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>



<!-- Meet the Team Section -->
    <!--Step 14 and Step 16-->
    <div class="row bg-dark rounded">
      <div class="col">
        <!--Step 15--> 
        <h2 class="text-center text-white display-4">Meet the Team</h2>

<!-- Step 10: Making Cards-->

         <!--Brian-->
         <div class="row-8 row-md-4">
           <div class="col my-4">
              <div class="card mx-auto" style="width: 16rem;">
                <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/brian.png" class="card-img-top" alt="CEO Brian"/>
                <div class="card-body">
                  <h5 class="font-weight-light text-center"><span class="font-weight-bold">CEO</span> Brian M.</h5>
                  <p class="card-text font-weight-light text-center">Ad Hoc's CEO Brian enjoys Hiking in his free time.</p>
               </div>
            </div>
          </div>
        </div>
       
        <!--Andy-->
        <div class="row-8 row-md-4">
          <div class="col my-4">
            <div class="card mx-auto" style="width: 16rem;">
            <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/andy.png" class="card-img-top" alt="CFO Andy"/>
            <div class="card-body">
              <h5 class="font-weight-light text-center"><span class="font-weight-bold"> CFO </span> Andy C.</h5>
              <p class="card-text font-weight-light text-center">Ad Hoc's CFO Andy loves urban exploration and collecting toques.</p>
            </div>
          </div>
        </div>
    </div> 
   
        <!-- Angela -->
        <div class="row-8 row-md-4">
          <div class="col my-4">
            <div class="card mx-auto" style="width: 16rem;">
              <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/angela.png" class="card-img-top" alt="COO Angela"/>
              <div class="card-body">
                <h5 class="font-weight-light text-center"><span class="font-weight-bold">COO</span> Angela W.</h5>
               <p class="card-text font-weight-light text-center">Ad Hoc's COO Angela is a dedicated caffeine enthusiast.</p>
              </div>
            </div>
         <div>
    </div>  
    
        <!-- Amie-->
        <div class="row-8 row-md-4">
          <div class="col my-4">
            <div class="card mx-auto" style="width: 16rem;">
              <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/amie.png" class="card-img-top" alt="CTO Amie"/>
              <div class="card-body">
                <h5 class="card-title font-weight-light text-center"><span class="font-weight-bold">CTO</span> Amie W</h5>
                <p class="card-text font-weight-light text-center">Ad Hoc's CTO Amie loves learning photography and took this photo.</p>
              </div>
           </div> 
        </div>
    </div>   
<!-- these two close the card section added in the other two because the footer started acting peculiar--> 
 </div> 
 </div>

</div>
</div>

  <!-- Footer -->
  <!--Step 20-->
  <footer class="bg-light text-dark  text-right">
   <p>2021 Adhoc &copy;</p>
  </footer>

  <!-- Bootstrap's JavaScript Files -->
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

This is how it looks like rendered:


The Image carousel


The Cards

I also changed the footer to be right instead of centered because I don’t think your eye needs to be immediately drawn there after reading about the company.


Footer.

LMK if you have a work around for the FUN. image. I’m stuck on the code solution.

If you were assigning fixed width to the parent, you could use object-fit: cover. But that’s not the case. Plus you’re on Bootstrap that basically won’t allow you much proper modification of the CSS (or else make you debug CSS for hours).

So I think the most sensible thing to do on this case is, like you said, to download the images so you can resize them on your computer (I understand Pixabay allows you to download?).

1 Like

You’re absolutely right !! Pixabay does allow the old download. I should just do that grab them into paint or GIMP… I did try doing the size on the carousel item instead of the image and could always make it look optimized for mobile views (I did manual set of height: 13rem;) but a overstretch stressed out thing on the full size browser.

I even tried using different images of balloons :balloon: and regardless of the image the second slide … I think for lack of a better measure… still always is 1/8th bigger. Not sure what’s the deal there.

I did see on stack overflow a few CSS work-arounds like you’re suggesting…Though I did not ever get the sense that CSS and Bootstrap didn’t play nice together. Or I guess I nicely as they could. Thats good to know going forward.

Very good point indeed. Yes, well, for that I can think of a couple of options on vanilla CSS that you can play with. One is the srcset plus sizes attributes of the <img /> element. Here you will find some examples of how to use them. The other option, depending on the image and how you want to show it on mobile vs large screen, etc. could be the one I mentioned above, the object-fit property. Playing with both, I’m sure you’ll find a way to accommodate them.



Ha ha, you’re probably right, I think it’s more likely my inability with Bootstrap than any sort of incompatibility or the like. :smiley: But nobody forced me to comment on this thread about… Bootstrap. Please disregard my comment there. :hear_no_evil:

1 Like

Well the advantage of Bootstrap is everything is done for you out of the box but if you’re not using like cards or a carousel you’re installing a lot of little extras that don’t matter. I also wonder if Bootstrap in the long run will make all websites look samey?? :face_with_monocle: I really enjoy making things custom even though it means a lot of tinkering…

I dunno I decided whilst doing the Bootstrap exercise I would try Sass… Now that’s something I’m venturing out to say this: It feels like CSS for CSS… not convinced quite yet. Being sassy with the SASS…

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.