Bootstrap jumbotron not working properly in ruby on rails app-CodePudding

I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:

bundle add bootstrap

It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added

 @import "bootstrap";
 @import "bootstrap-sprockets";

to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.

I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.

This is how it looks (https://i.stack.imgur.com/R630H.png)

<div >
    <div >
        <h1>
            This is my header
        </h1>
        <p>
            Hello this should maybe someday be a jumbotron
        </p>
    </div>
    <div >
        <h4>Primary Callout</h4>
        This is a primary callout.
    </div>
    <%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
    <button >Green button</button>

</div>

Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4

I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository

I tried using a full html5 template and adding

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?

CodePudding user response：

I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did. Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/

Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/

Happy hacking!