Designing a component with Bootstrap-inspired flair

Question

Designing a component with Bootstrap-inspired flair

We are currently in the process of transitioning our ASPX CMS website to a new platform, and some of the retired pages will be hosted on a separate website under a subdomain. The new website will be utilizing Bootstrap 4.6, whereas our existing CMS site relies on custom CSS without any frameworks or libraries. As a result, I am now tasked with extracting various sections of the website and reconstructing them using Bootstrap.

One particular section I am working on is the 'Speakers' segment, but I have encountered some challenges that I believe are stemming from my current approach. I am attempting to replicate a design concept with a horizontal line for padding across the screen width.

Here is an example of what I am trying to achieve:

https://i.sstatic.net/CC5fy.png

And here is my current progress, along with the reasons why I am seeking assistance:

https://i.sstatic.net/aQGsE.png

Additionally, here is the HTML code I am currently using:

<div class="row pt-4 mt-1 pb-4">
        <div class="col-lg-10">
            <div class="container-fluid ceda-event-box pl-0 pb-5">
                <h2 class="mt-5 pr-1 pl-5 pt-4 bg-ceda-darkblue"><br></h2>
                <p><br></p>
            </div>
        </div>
    </div>

Furthermore, here are the CSS classes I am utilizing (mostly inherited from the existing site's CSS) to maintain consistency with the gradient grey color and SVG image:

.ceda-event-box::before {
    content: "";
    display: block;
    position: absolute;
    left: calc((100% - 100vw) / 2);
    right: 54px;
    top: 0px;
    bottom: 0;
}

.ceda-event-box::before {
    background: linear-gradient(64.15deg, #f3f3f3 50.52%, #bfbfbf 100%);
    z-index: -1;
}

... (CSS continues)

If you have any recommendations on better Bootstrap components or alternative approaches to construct this section, I would greatly appreciate any guidance or suggestions you can provide. Thank you!

html css bootstrap-4

Answer 1

Answer №1

To ensure proper alignment of the blue element with the grey background, consider setting the element to position: absolute and adjusting the top, left, and right properties accordingly. The key is to match the right property of the blue element with the one defining the grey background's position in relation to its elements, which is most likely .ceda-event-box::before. Both elements should be absolute and inherit relative properties from their closest parent for proper alignment.

:root {
  --top: 4px;
  --height: 98px;
}

// CSS code for styling the elements goes here
// ...

}

<div class="row pt-4 mt-1 pb-4">
        <div class="col-lg-10">
            <div class="container-fluid ceda-event-box pl-0 pb-5">
                <h2 class="mt-5 pr-1 pl-5 pt-4 bg-ceda-darkblue"></h2>
                <p><br></p>
            </div>
        </div>
    </div>

To align the bottom of the blue element with the bottom of the gradient ( .ceda-event-box::before), you can use the same bottom property for both elements. Including a 20% buffer for the bottom of the elements will demonstrate this alignment. Again, using CSS variables can help achieve this seamlessly.

:root {
  --top: 4px;
  --height: 98px;
  --bottom: 20%;
}

// More CSS styling for the elements can be added here
// ...

}

<div class="row pt-4 mt-1 pb-4">
  <div class="col-lg-10">
    <div class="container-fluid ceda-event-box pl-0 pb-5">
      <h2 class="mt-5 pr-1 pl-5 pt-4 bg-ceda-darkblue"></h2>
      <p><br></p>
    </div>
  </div>
</div>

Answer 2

To ensure proper alignment of the blue element with the grey background, consider setting the element to position: absolute and adjusting the top, left, and right properties accordingly. The key is to match the right property of the blue element with the one defining the grey background's position in relation to its elements, which is most likely .ceda-event-box::before. Both elements should be absolute and inherit relative properties from their closest parent for proper alignment.

:root {
  --top: 4px;
  --height: 98px;
}

// CSS code for styling the elements goes here
// ...

}

<div class="row pt-4 mt-1 pb-4">
        <div class="col-lg-10">
            <div class="container-fluid ceda-event-box pl-0 pb-5">
                <h2 class="mt-5 pr-1 pl-5 pt-4 bg-ceda-darkblue"></h2>
                <p><br></p>
            </div>
        </div>
    </div>

To align the bottom of the blue element with the bottom of the gradient ( .ceda-event-box::before), you can use the same bottom property for both elements. Including a 20% buffer for the bottom of the elements will demonstrate this alignment. Again, using CSS variables can help achieve this seamlessly.

:root {
  --top: 4px;
  --height: 98px;
  --bottom: 20%;
}

// More CSS styling for the elements can be added here
// ...

}

<div class="row pt-4 mt-1 pb-4">
  <div class="col-lg-10">
    <div class="container-fluid ceda-event-box pl-0 pb-5">
      <h2 class="mt-5 pr-1 pl-5 pt-4 bg-ceda-darkblue"></h2>
      <p><br></p>
    </div>
  </div>
</div>

Answer 3

Answer №2

I approached it from a different angle and made some modifications that I feel enhance it:

Here's the revised version specifically tailored for desktop/large screens... there's room for further adjustments and the CSS Classnames will be updated. https://i.sstatic.net/df94o.png HTML Code:

<div class="clearfix pb-4"></div>
    <div class="container-fluid float-left pl-0 pr-0 test-box mb-4">
        <div class="container-fluid float-right pt-4 test-box-title">
            <h2 class="b-heading-2 pt-4 pb-4">SPEAKERS</h2>
        </div>
        <div class="container-fluid float-right pr-0 m-0 bg-ceda-darkblue text-white test-box-dark">
            <p class="p-sm-2 p-lg-5">The Hon. Dominic Perrottet MP, Treasurer of NSW<br>
                Melinda Cilento, Chief Executive, CEDA</p>
        </div>
    </div>

CSS Code:

.test-box {
    width: 85% !important;
    background: linear-gradient(64.15deg, #f3f3f3 50.52%, #bfbfbf 100%);
    z-index: -1;
}

@media (max-width: 768px) {
    .test-box {
        width: 95% !important;
    }

    .test-box-title {
        max-width: 92% !important;
    }

    .test-box-dark {
        max-width: 90% !important;
    }
}

.test-box-title {
    max-width: 85% !important;
}

@media (min-width: 768px) {
    .test-box-title::before {
        content: "";
        display: block;
        width: 127px;
        height: 98px; 
        background-image: url("edited-base64");
        position: relative;
        top: 70px;
        right: 40px;
        background-repeat: no-repeat;
        float:right;
        right: 0%;
    }
}

.test-box-dark {
    max-width: 65%;
}

Answer 4

I approached it from a different angle and made some modifications that I feel enhance it:

Here's the revised version specifically tailored for desktop/large screens... there's room for further adjustments and the CSS Classnames will be updated. https://i.sstatic.net/df94o.png HTML Code:

<div class="clearfix pb-4"></div>
    <div class="container-fluid float-left pl-0 pr-0 test-box mb-4">
        <div class="container-fluid float-right pt-4 test-box-title">
            <h2 class="b-heading-2 pt-4 pb-4">SPEAKERS</h2>
        </div>
        <div class="container-fluid float-right pr-0 m-0 bg-ceda-darkblue text-white test-box-dark">
            <p class="p-sm-2 p-lg-5">The Hon. Dominic Perrottet MP, Treasurer of NSW<br>
                Melinda Cilento, Chief Executive, CEDA</p>
        </div>
    </div>

CSS Code:

.test-box {
    width: 85% !important;
    background: linear-gradient(64.15deg, #f3f3f3 50.52%, #bfbfbf 100%);
    z-index: -1;
}

@media (max-width: 768px) {
    .test-box {
        width: 95% !important;
    }

    .test-box-title {
        max-width: 92% !important;
    }

    .test-box-dark {
        max-width: 90% !important;
    }
}

.test-box-title {
    max-width: 85% !important;
}

@media (min-width: 768px) {
    .test-box-title::before {
        content: "";
        display: block;
        width: 127px;
        height: 98px; 
        background-image: url("edited-base64");
        position: relative;
        top: 70px;
        right: 40px;
        background-repeat: no-repeat;
        float:right;
        right: 0%;
    }
}

.test-box-dark {
    max-width: 65%;
}

Designing a component with Bootstrap-inspired flair

Answer №1

Answer №2

Similar questions

Div element remains fixed in width while zooming in

The focusable attribute in SVG is malfunctioning

Convert JavaScript code to Google Appscript

The image source is unable to locate the image

HTML input field that shows a hint text when selected

Checking for the Existence of a Database Table in HTML5 Local Storage

Guide to automatically inserting text into an html form and submitting it without manual intervention

Animating a div in jQuery by creating a duplicate

Problem with the fixed header on a container causing a horizontal scroll bar

Expanding a wrapper to fit the entire width of its content

Having trouble installing $ npm i mini-css-extract-plugin. Any ideas on what might be causing the issue?

Navigating through nested arrays in Laravel Blade templates

What is the process for loading a PHP page dynamically within the <DIV> of another PHP page?

Generate a dynamic image using CSS and either a div or a span tag

What is the process for inserting an SVG object into an HTML document?

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

I am looking to incorporate an OVG video onto my website

Choose a specific cell in the table and store it in the session

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Tips for utilizing Jinja2 to produce a custom HTML email design?