Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling

main #main-content-wrapper div {
  padding: 0;
  margin: 0;
}

img {
  border-radius: 8px;
}

.overlay1 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay2 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay3 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.jadePackage1:hover .overlay1 {
  opacity: 1;
  background: rgba(8, 133, 8, 0.53);
}

.rubyPackage1:hover .overlay2 {
  opacity: 1;
  background: rgba(100, 43, 46, 0.53);
}

.sapphirePackage1:hover .overlay3 {
  opacity: 1;
  background: rgba(0, 0, 255, 0.43);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  height: 400px;
  width: 300px;
}

ul {
  width: 370px;
}

ul li {
  font-size: 17px;
  text-align: left;
  /*border: 1px dotted black;*/
}

ul.colorOptions {
  list-style-type: decimal;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27272c222432271420362c232e2506">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id="main-content-wrapper">
  <div class="container-fluid" id="travelPackages">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-3 jadePackage1" style="margin-right: 30px; margin-left: 200px; border: 1px solid black;">
        <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px; ">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

I am trying to make the header "The Jade" cover 100% of the top of the photo to create a header overlaid on the image instead of in the middle.

I have experimented with different display settings and widths, but this is the largest size I have achieved so far, close but not quite there yet.

htmlcssbootstrap-5

Answer №1

Your code seems to have a mix of inline and CSS styles, which can create some confusion. I recommend moving all styles to your CSS file and organizing them properly. This will make it easier for you to manage and add new styles in the future.

Regarding your query, the h1 element currently takes up 100% of the available width but stops due to the padding applied to the wrapper. To fix this, you should remove the padding from the wrapper container (.jadePackage1). I've added an inline style padding: 0 to demonstrate this. You can refer to the snippet provided below.

[CSS styles here]
[HTML code here]

Answer №2

You have the option to include this rule...

.row > .jadePackage1 {
  padding: 0;
}

...to reset the default padding set by bootstrap on the parent container of that h1.

main #main-content-wrapper div {
  padding: 0;
  margin: 0;
}

img {
  border-radius: 8px;
}

.overlay1 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay2 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.overlay3 {
  position: absolute;
  top: 0;
  right: .1px;
  bottom: 399px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s ease-in-out;
  background-color: #088508;
}

.jadePackage1:hover .overlay1 {
  opacity: 1;
  background: rgba(8, 133, 8, 0.53);
}

.rubyPackage1:hover .overlay2 {
  opacity: 1;
  background: rgba(100, 43, 46, 0.53);
}

.sapphirePackage1:hover .overlay3 {
  opacity: 1;
  background: rgba(0, 0, 255, 0.43);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  height: 400px;
  width: 300px;
}

ul {
  width: 370px;
}

ul li {
  font-size: 17px;
  text-align: left;
  /*border: 1px dotted black;*/
}

ul.colorOptions {
  list-style-type: decimal;
}
.row > .jadePackage1 {
  padding: 0;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e514e53">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main id="main-content-wrapper">
  <div class="container-fluid" id="travelPackages">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-3 jadePackage1" style="margin-right: 30px; margin-left: 200px; border: 1px solid black;">
        <h1 style="font-size: 20px; background-color: white;display: flex; justify-content: center; margin: auto; padding: 0 100px 0 100px;">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

Answer №3

Avoid tampering with Bootstrap's grid system - containers, rows, and columns. It's not wise to add custom margins or padding on them, or specify widths. This can cause everything to break. Avoid using inline styles altogether - especially during development. If you need to experiment, use the browser inspector first and then apply changes to a custom class.

I recommend creating a custom class to adjust the content placement within a column without disrupting the grid structure.

.jadePackage1 {
  background-image: url("https://placekitten.com/400/300");
  background-size: cover;
  border: 1px solid black;
  min-height: 150px;
}

h1 {
  font-size: 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 0 100px 0 100px;
}

.w-100-in-col {
  margin-left: -12px;
  margin-right: -12px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d332669">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<main id="main-content-wrapper">
  <div class="container-fluid" id="travelPackages">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-3 jadePackage1">
        <h1 class="w-100-in-col">The Jade Package <span>$19.99</span></h1>
      </div>
    </div>
  </div>
</main>

The best approach is to remove excessive styling related to Bootstrap components. Collaborate with the framework rather than working against it, focusing on styling the grid content if possible.

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

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

Revamp your Redux Form with a fresh new 'Field' label style

Is there a way to style the label of a Redux Form field? The Redux Form API does not provide information on how to apply styles to the label. Despite applying the classes.formField class, the label itself remains unstyled. Could this be an issue with inhe ...

cssreactjsmaterial-uiredux-form

Changing the size of the Modal Panel in Ui Bootstrap for a customized look

Currently, I am in the process of developing an application that utilizes Ui bootstrap to seamlessly integrate various Bootstrap components with AngularJs. One of the key features I require is a modal panel, however, I found that the default size option &a ...

angularjscsstwitter-bootstrap

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml

How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

clickable dropdown hover dropdown.jpg Source: Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long ...

htmlcssdrop-down-menuhoverbootstrap-4

Message: Unable to locate the requested resource for Paypal verification with the information provided (email, first name,

My email, firstname, lastname are all functioning correctly for verification on the PayPal website. You can check it out here: I am encountering an issue after submitting my form. The email, firstname, lastname in my controller are being automatically cal ...

htmlruby-on-railsrubypaypalcontroller

Using class binding for both ternary and non-ternary attributes

Suppose we have a tag that utilizes a ternary operator to apply alignment: <td :class="alignment ? ('u-' + alignment) : null" > This functions as intended since the pre-defined alignment classes are in place, now if we want to ...

javascripthtmlcssvue.js

Closing the dropdown menu by directly clicking on the button

I've noticed several inquiries on this platform regarding how to close a drop-down menu by clicking anywhere outside of it. However, my question is a bit different. I want the dropdown-menu to remain open once clicked, only closing when the user clic ...

javascriptjqueryhtmlcssdrop-down-menu

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

Tips for properly formatting a fixed table header

I'm currently facing an issue with the sticky header style in my data table. I have created a simple Angular component along with a specific directive: sticky.directive.ts @Directive({ selector: '[sticky]' }) export class StickyDirecti ...

htmlcssangularcss-tables

Is it possible to modify the flex direction in Bootstrap based on specific breakpoints?

I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" brea ...

cssbootstrap-4flexbox

Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code? I'm having trouble figuring it out on this website: Your assistance would be greatly appreciated! Thank you in advance! CSS Code: #first_tab { ...

htmlcss

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

javascriptcssreactjsnext.jschakra-ui

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

Ways to keep the position of an expanded collapsible table from Material UI intact

I found a collapsible table code snippet on this website: https://mui.com/material-ui/react-table/#collapsible-table However, there seems to be an issue where when I expand a row, the table "grows up" as it increases in size. This behavior is not ideal. I ...

javascripthtmlcssreactjsmaterial-ui

Selenium allows the liberation of a webpage from suspension

I'm facing an issue with resolving the suspension of a website as shown in the image below. My goal is to access a ticket selling website every 0.1 seconds, but if it's busy, I want it to wait for 10 seconds before trying again. Visit http://bu ...

javascriptjavapythonseleniumhtml

Is there a way to transfer a significant volume of data from one webpage to another without relying on the POST

Currently, I am utilizing a web server framework that exclusively operates with GET requests. Presently, my task involves transferring a substantial volume of data (specifically the text content in a textarea) inputted by users onto another page where it i ...

javascriptphpjqueryhtmlapache

Adjusting image size by adding padding to accommodate larger screens using Bootstrap 4

I have incorporated Bootstrap into my server-side web application to resize images for larger screens by adding padding to prevent them from getting too big. However, I'm unsure if this is the best approach. Are there better methods for resizing image ...

cssbootstrap-4

iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar. For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy ...

cssweb-applicationsresponsive-designmobile-safari

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss