Kevin Powell - Community•8mo ago

How to create this UI using Bootstrap?

I want to recreate something close to that box UI. As you can see, there is a box "floating above" 2 divs/sections. How can I get something like that using bootstrap? Which utility/component should I look at?

8 Replies

Melodium•8mo ago

i think it can't be completed only with bootstrap (for that early access card being overlapped) but yeah, a veteran will help you with that :]

Mannix•8mo ago

don't think there is any utility/component to achieve that in bootstrap.

MarkBoots•8mo ago

as it are solid bg colors, you could just make it it's own section in between with a 2 color gradient.

ShayokhOP•8mo ago

Can z index solve it? Clever idea but doesnt sound very practical tbh 😞 Do I need raw css with bootstrap to this UI?

Jochem•8mo ago

yes Mark's idea can be as simple as style="background: linear-gradient(to bottom, #color1_hex 50%, #color2_hex 50%);" on the wrapper element for that "early access" box

ShayokhOP•8mo ago

If I wanted to use raw css only without any fancy framework, how should I approach this floating box?

Jochem•8mo ago

why use raw css only? You can just add styles to your bootstrap site very vaguely, I'd do something like

<section class="splitbackground">
  <div class="box">...</div>
</section>

<section class="splitbackground">
  <div class="box">...</div>
</section>

with

.splitbackground {
  background: linear-gradient(to bottom, #color1_hex 50%, #color2_hex 50%);
}

.splitbackground {
  background: linear-gradient(to bottom, #color1_hex 50%, #color2_hex 50%);
}

ShayokhOP•8mo ago

Okay. I will give that a try

Gaming

Programming

How to create this UI using Bootstrap?