How to align a child element in the center when the parent is not centered or taking up the full width

I am currently working on building a layout with Bootstrap 4.6, and I am facing an issue with centering the header, columns/cards, and buttons on the page width while the parent container is left-aligned and not full width.

Additionally, I need help with getting the SVG image (the dots in the image I am trying to replicate) to appear correctly.

Here is an image of what I currently have (the image spans the full width of a 1920x1080 screen): https://i.sstatic.net/nvvQ4.png

And here is how I am aiming for it to look like approximately (this was created using TailWind CSS by a third party): https://i.sstatic.net/tb3L5.png

.related-box {
  width: 88% !important;
}

.related-box::before {
  content: '';
  ...
}
<div class="container-fluid pt-3 pl-0 pr-0">
  <div class="container-fluid related-box bg-ceda-light float-left">
    ...
  </div>
</div>

htmlcssbootstrap-4

Answer №1

If you wish to center your content, it's essential to provide the gray box with an equal space on its left side. Based on the image provided by your designer, it seems that they intend to have a 17% white space on the right. To replicate this space on the left, I have incorporated a division that accounts for 79.52% of the remaining space (calculated as one minus the 17% white space divided by the 83% gray space = 1 – 17/83 = 79.52%). You can then place a new container inside that centered div to contain your cards.

I'm not familiar with SVG, so I created a PNG file and embedded it as a base64 image to demonstrate the effect. Additionally, I didn't adjust your dots for small screens, but it appears to align with your image on larger screens.

Your code originally used col-xs-10 which is from Bootstrap 3, but since you're using Bootstrap 4 according to your tag, I updated your column styles accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The text/font-weight of the header button is mysteriously shifting without warning

While creating a header for my webpage, I encountered an issue where the text family was changing when the dropdown menu was launched in Safari 8. Curiously, this behavior did not occur when using Chrome to launch the jQuery function. Even after attempting ...

javascriptjqueryhtmlcssfonts

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

phphtmlmysqldynamic-datadompdf

Developing bi-directional binding for newly generated elements post initial compilation

I have developed a directive that dynamically generates a form based on a JSON received from the server. I am trying to include the ng-model attribute in the input elements so that I can access the input values once the user enters them and clicks submit. ...

javascripthtmlangularjs

What exactly does this jquery library aim to achieve?

Recently, I discovered a new library for CSS3 animations. As someone who is still learning JavaScript, I am unsure of the benefits it offers. It appears to replicate what jQuery can already achieve but by utilizing CSS3. So, what advantage does using a to ...

jquerycssjquery-animatecss-transitions

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Some web browsers do not support video html5, except for Google Chrome

Not all browsers support HTML5 video, with the exception of Google Chrome. In Firefox, there may be a message saying "No video with supported format and MIME type found." To embed a video in your page, you can use the following code: <video width="3 ...

htmlvideo

Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

HTML Section <div class="features-section"> <div class="container"> <div class="row"> <div class="feat-heading text-center"> <h3>Features</h3> ...

jqueryhtmlimagecsshover

Applying a dual background effect with one background repeating from the center using CSS3

I am trying to achieve a unique effect with CSS3 backgrounds. I want the second background image to start repeating from the middle of the screen down, rather than from the top. Below is my CSS code: body { background: url('../img/carbon_fibre.png ...

htmlcss

I require the use of XSL to verify the href value of links and modify it if needed, without altering any other attributes

The code mentioned above performs the following tasks: Locates links Checks if it is a fully pathed link or an email link If yes, no action is taken. If no, it checks for a # to determine if it is an anchor If yes, no action is taken. If no, it adds the d ...

htmlxslt

Bootstrap carousel powered by AngularJS

Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify ...

cssangularjstwitter-bootstrap

The checkbox click function is not functioning properly when placed within a clickable column

In my coding project, I decided to create a table with checkboxes in each column. <table class="bordered"> <thead> <tr style="cursor:pointer" id="tableheading" > <th>Name ...

javascriptjqueryhtmljsp

Steps for deactivating a button based on the list's size

I am trying to implement a feature where the user can select only one tag. Once the user has added a tag to the list, I want the button to be disabled. My approach was to disable the button if the length of the list is greater than 0, but it doesn't s ...

javascripthtmlangulartypescriptionic4

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

As I delve into learning Angular with TypeScript, I've encountered some inconsistencies compared to JavaScript that are puzzling me. Take for example this function that works flawlessly with pure JavaScript, where it dynamically sets the min and max a ...

javascripthtmlangulartypescript

Node.js suffering from 'empty post method' issue

I am encountering an issue while retrieving values from certain fields in an index HTML. The post method is returning empty values, with { } being returned instead of the expected email, nick, name, and pass values. Here is my server.js code: var mongoos ...

javascripthtmlnode.jsbody-parser

Learn how to connect a button to a webpage using jquery while also executing another function when clicked

I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...

jqueryhtml

Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs ...

csshtmlscrollbar

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

Tips for choosing Week Range values with Selenium WebDriver

Currently, I am working with Selenium WebDriver and I am trying to figure out how to select week range values from a dropdown menu at once. I have a dropdown called Period, which, when selected, automatically reveals additional dropdowns for From week and ...

javajavascriptjqueryhtmlselenium

How can I make a Bootstrap 4 modal autoplay an iframe on page load?

My website features a full-screen background video that plays upon loading, and I want the same video to play when a user clicks the play button to open a modal. However, my issue is that the modal video (iframe) starts playing in the background as soon ...

jqueryhtmlcsstwitter-bootstrap

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

javascriptinternet-explorerhtmlinternet-explorer-8appendchild