Guide to ensuring child elements inherit parent's width in Bootstrap 4

Want to ensure that a child element inherits the parent's width in Bootstrap 4?

Trying to adjust the width of the download_resume block.

Currently using two key Javascript scripts:

1. The first function changes the image with a hover effect

2. The second function adds a sticky class to the empty_row block to make it position fixed

To better understand the issue and my desired outcome, please view the code on a wide screen or at CodePen

... (remaining content has been truncated for brevity)

Answer №1

Instead of setting the width to inherit, there may be a better solution. Without "sticky," unexpected things can occur.

To address this issue, I've introduced an additional div to encapsulate your top section in question. It's important to maintain padding for the top section with the image when transitioning from sticky to non-sticky. This approach separates it from the resume download button, eliminating the need to specify a width on that particular div.

HTML (Include the added "left-block-padding" div)

<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
        <div class="left-block-padding">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
    </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>

CSS (Introduce .left-block-padding and remove position:absolute; and width: 100%; from .download_resume)

.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
    color: #fff;
    font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}

.left-block-padding {
  padding: 30px 20px 20px;
}

JS (No changes made)

// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
    avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
    avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
     var scrolled = window.pageYOffset || document.documentElement.scrollTop;
     scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}

https://codepen.io/adprocas/pen/QmLjJM

Answer №2

Learn how to use width:inherit property to adopt the width of its parent element

.download_resume {
  position:absolute;
  width: inherit;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

You can check out the code sample here - https://codepen.io/nagasai/pen/xWKGvW

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

Align Bootstrap navigation bar items at the center horizontally

I am currently working on a navigation bar that features two icons, evenly distributed. To achieve this look, I have been experimenting with scaling the icons horizontally in order to make them center-aligned within the navigation bar. However, I have not ...

Get rid of the lower padding on a handsontable

I am currently using either Chrome Version 61.0.3163.100 (Official Build) (64-bit) or Safari Version 11.0 (12604.1.38.1.7) on Mac OS Sierra 10.12.6. I am looking to create a handsontable that may exceed the screen height: Click here for an example As I ...

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

How to effectively delete the class from a navigation list item

Looking for some inspiration? Check out the basic visuals for this question here. But let me break it down for you. This snippet shows the HTML & CSS behind a tabbed-carousel, with a condensed version for clarity: <style> #myCarousel-100 . ...

What are the steps to implementing a grid image system in Bootstrap4?

How can I use Bootstrap4 and CSS3 to position picture 4 and 5 under picture 2 and 3 within a grid layout? <main> <div class="container-fluid"> <div class="row"> <h1 class="col-12">Anonymous& ...

Reducing size and Assembling JavaScript and CSS

I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

Can a font size be adjusted dynamically based on the width of its containing class?

I have encountered this issue before, but the previous solution did not work for me. I am now seeking a viable alternative. Currently, I am developing a website and have an event announcement block that needs to display the event date spanning the entire ...

The search bar effortlessly slides into view on the navigation bar as I scroll down using Bootstrap 4

Is it possible to create a hidden searchbar within a navbar that only appears when scrolling down, and if so, can I set the timing for when it appears after scrolling? ...

Customizing Bootstrap navbar classes - ineffective

Having trouble overriding some of Bootstrap's navbar classes. I've tried using !important, but would prefer to avoid it if possible. This is the HTML I'm working with: <nav class="navbar navbar-default" role="navigation"> <ul cl ...

How can I prevent a browser from caching a CSS file when the file is updated?

I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...

Trouble with Bootstrap Popover's visibility

My current setup involves a popover that is not initializing properly. The code I am using is shown below: HTML: <div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div> JavaScript: $(function () { $('[data-t ...

Is it possible to have images automatically resize to fit the content div without becoming distorted?

I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...

Problem with user scalability in desktop browsers: when zooming out to 33% and lower, all CSS vanishes

Having trouble understanding why my styling disappears at 33% zoom on Chrome and even worse at 75% on IE11. <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="viewport" content="w ...

Transform your CSS3 rotateY into PHP Imagick::distortImage

I'm trying to rotate an image by rotateY(-54deg) on the front-end, and now I need to achieve the same rotation in PHP using Imagick::distortImage. $image->distortImage(Imagick::DISTORTION_PERSPECTIVE, $controlPoints, true); Is there a straightfor ...

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

My div remains stationary despite keyframes

I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly. <div class="globo"></div> @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-moz-keyframe ...

Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() m ...

Creating a responsive image using Bootstrap with an SVG filter applied

I've been working on applying an SVG filter to responsive images in Bootstrap 4 by using the class "img-fluid" However, I'm facing an issue where the separation between images varies across different resolutions. It's fine on desktop, but o ...

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

For some reason, I'm having trouble getting the footer to properly align at the bottom of the page. My body only seems to go halfway up the page. I tried wrapping everything in a main tag and setting a height on that, but it always ends up stopping at ...