How to insert Jumbotron with Bootstrap 5

Bootstrap Studio Help
1

Hello, I experience issue when I want to insert Jumbotron. There is no Jumbotron in component. How to use Jumbtron in Studio with Bootstrap 5?

Thanks.

2
3

You could do what I do with some things that aren’t in BS5. I load up a blank project (basically named it BS4to5transfer) add a jumbotron to that project and save it. Now using the File menu at the top choose to upgrade the project to BS5. This gives you the old file which I just save for a later use, and a new file with the new upgraded version of a component.

Now you can copy the component and it’s supporting files to your working project. You may need to make a few adjustments once it’s done, but usually things aren’t too horrible to do this with. Eventually if there aren’t a lot of classes I’ll throw them in with my working file CSS files.

DISCLAIMER: I have not tried using this with a Jumbotron so don’t shoot the messenger lol. Just letting you know what I DO try to do when I want something from an older version.

4

Hello, I’m new with this. Thank you for the reference, already read it but still confuse how to implement that in BSS.

Thanks.

5

Hello.

Already try that. It looks good but still effort to adjust some area that change caused by upgrade project to BS5.

Thanks.

6

Yeah you’re going to have to do some adjusting for sure. I don’t think you’re going to find much of a way around this other than to do that as it just isn’t there anymore in BS5.

If you go to the page that @kuligaposten posted, then on the right side you’ll see the Jumbotron listed. Click that and it will show you what the new jumbotron can look like. If you do an “Inspect” on one of them you will see the code that is needed. It’s pretty simple, I don’t see anything difficult there at all to reproduce. Give that a shot and see how that goes. Basically it’s just a large card box or similar so it’s not anything real hard to do.

If that doesn’t work you might want to try working with the new Card system and adjust it to your needs.

7

If it is any help, I have just added a basic jumbotron based on the Migrating to V5 link

Search the online library for BS5 Jumbotron

image

1 Like
8

@richards

You made a full width section, if you want a jumbotron put your div in a container like this

<div class="container">
	<div class="p-5 mb-4 bg-light round-3">
		<div class="container-fluid py-5">
			<h1 class="display-5 fw-bold">The Title</h1>
			<p class="col-md-8 fs-4">you can remix and restyle it to your liking.</p>
			<a class="btn btn-primary btn-lg" role="button" href="#">Button</a>
		</div>
	</div>
</div>
1 Like
9

Yes, I made it so it can be dropped into anything containers - rows - columns - whatever you like

like this: (all using the same library block)

https://snippets.bss.design/

1 Like