I want to make this type of responsive area

[Waqar_Butt]

I want to make this type of responsive area in my HTML which is highlighted in red area

Design is left align to the bootstrap 4 container but it's taking full right area space, how I can make this also the the hover effects. Thank you in advance.

[scoplen10]

I don't see the red highlighted area.

Do you know float:right in css?

[ronpat]

We need to see the HTML and CSS for the site. Posting a link to the site would probably be easiest.

Thank you in advance.

[TechnoBear]

I don't see the red highlighted area.

That is because for some strange reason, @Waqar_Butt has changed the image from the one originally posted to something quite different.

I am unlisting this topic until we can establish exactly what the question is and what assistance is required.

[TechnoBear]

[Waqar_Butt]

@scoplen10 when you click on the image you can see the highlighted area with red outline some multiple color boxes under this heading "Start something new"! Let me know if you want to know further information about design. Thanks

[TechnoBear]

[TechnoBear]

when you click on the image you can see the highlighted area with red outline

OK - thanks for the clarification.

As @ronpat says, we really need to see the HTML and CSS.

[Waqar_Butt]

@TechnoBear Basically I am trying to exactly make a responsive section in my website which is highlighted in red outline under this heading "Start something new"!

[Waqar_Butt]

@TechnoBear for this section I don't have a css & html I want to make it from scratch.

[TechnoBear]

In that case, can you explain how you want that section to behave at narrower screen widths? Further screenshots would be helpful.

[Waqar_Butt]

On narrow screens the section boxes will show below each other from this resolution 767px.

[Waqar_Butt]

I want to make something like that this is an example website: https://demo.goodlayers.com/?theme=rocketboard

But I want the right area should take the full width as shown in my attachment.

[TechnoBear]

On narrow screens the section boxes will show below each other from this resolution 767px.

What should happen on screens which are wider than 767px but narrower than 1800px (the width of your image?

[Waqar_Butt]

boxes will shrink in sizes as per bootstrap classes are work.

[PaulOB]

But I want the right area should take the full width as shown in my attachment.

I don't usually like to offer full solutions but I think you might find this difficult without the full code.

Here is a codepen example (view on codepen to see full effect (click edit on codepen)).

You need to come out of the bootstrap container for the wide section so close the main container as in the example so that you can have a section stretching full width. You will then need to use 'calc' so that you can work out what the gap on the left needs to be which is the viewport width minus the fixed width section of bootstrap (1140px) and then divide by two (margin-left:calc((100% - 1140px) / 2);).

The rest is just using flex containers to fill the space as required (although you could use bootstrap flex columns if you wanted for the containers but normal css is simpler).

[Waqar_Butt]

@PaulOB Thank you so much for you coordination!