Front End Development Libraries Projects - Build a Random Quote Machine

I am trying to test bootstrap in codepen. Right now the class=“row” is not working and the twitter, tumbler and new quote are not on the same line. Does anyone have advice on the script or stylesheet that I need in the head to call bootstrap in codepen (assuming I am using the divs correctly). This does not seem to be working:

  <HTML lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>FCC : Random Quote Machine</title>
      <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-1580f96ce81ff0a427cf57dda2748ce646c38efc201ae5942a29958cffa6856d.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/global/global-13b6426431ed0f511a5f146fedda1389eb9eabcb17a1aee8bde0db5f7aa8b923.css">
      <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/packs/css/everypage-bc120a53.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/page/page-f19203c8fe65f7537f749457302a72522949afc3526cf238841f52afebabd5fa.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/editor/editor-9ec1239896c38e8af5e2c952d80a98c0bc83d9d805bf69d553a20e8689051f73.css">
     <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/> <!--add font-awesome-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> <!--add bootstrap-->
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script><!--Hamburger bar popout test module-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="quote-box">
        <p id="text"> 
          Quotes will go here.
        </p>
        <p id="author"> 
          Author's name
        </p>
        <div class="row">
    <div class="col-xs-1">
        <div class="buttons">
      <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank" href="https://twitter.com/intent/tweet?hashtags=quotes&amp;related=freecodecamp&amp;text=%22Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.%22%20Maya%20Angelou" style="background-color: rgb(119, 177, 169);">
        <i class="fa fa-twitter"></i>
      </a>
              </div>
    <div class="col-xs-1">
      <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=quote&amp;tags=quotes,freecodecamp&amp;caption=Maya%20Angelou&amp;content=Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.&amp;canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&amp;shareSource=tumblr_share_button" style="background-color: rgb(119, 177, 169);">
        <i class="fa fa-tumblr"></i>
      </a>    
      </div>
    <div class="col-xs-8">
      </div>
    <div class="col-xs-2">
      <button class="button" id="new-quote" style="background-color: rgb(119, 177, 169);">New quote</button>
    </div>
    </div>
    </div>
        <img id="tweet-quote"></img>
      </div>
    </body>
  </HTML>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

I have also noticed that trying to do nested styling of the following code

<div class="footer">by <a href="https://codepen.io/hezag/">hezag</a></div>

with

.footer {
  margin: 15px auto;
  font-size: 15px;
  color: #FFFFFF;
  a {
  color: white;
  }

is not working. I saw work for someone else. Do I need a script or stylesheet to do nested CSS styling?

I have swapped in this bootstrap script which still does not format into a row although it no longer messes up my background color:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script><!-- Bootstrap for Codepen-->```

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