Trying to create a full-width webpage using Bootstrap 4.
Attempting to eliminate the default 15px padding of container-fluid, but encountering issues.
Check out the details on jsfiddle. The background is set as purple, yet the jumbotron does not fully cover it.
<style>
.container-fluid {
padding: 0 !important;
}
</style>
To achieve the desired result, simply apply the p-0 and m-0 utility classes to the col and jumbotron elements without any additional CSS...
<div class="container-fluid">
<div class="row">
<div class="col-md-12 p-0" style="background: purple;">
<div class="jumbotron m-0">
<h2>
Hello, world!
</h2>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<div class="full-width-container">
<div class="row">
<div class="col-12">
add your own customized content here
</div>
</div>
</div>
https://getbootstrap.com/docs/4.1/utilities/spacing/#examples
Simply including the CSS class container-full-width resolved my issue.
<div class="container-full-width">
<div class=" row ">
<div class="col-12">
To eliminate the unwanted purple space, try implementing the following CSS rules:
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.jumbotron {
margin: 0;
}
For a more sophisticated approach that leverages the existing classes, check out this resource on StackOverflow.
Hey, I'm trying to implement a gradient on images in my project. Here's what I have so far: import Image from 'next/image' import Box from 'mui/material/Box' import PlayIcon from './PlayIcon.tsx' <Box ...
I'm struggling to understand why my iframe is positioned outside of the designated section. Check out my GitHub Pages site here and view the repository here. Any assistance would be greatly appreciated! https://i.sstatic.net/eNen2.png ...
I've always understood that when targeting a div with two classes in SCSS, you should structure it like this: HTML: <div class="item active">...</div> SCSS: .item { &.active { /* add your code here */ } } But what about whe ...
Apologies for my English... https://i.sstatic.net/XqwqK.png I'm looking to have a small window pop up on the site when someone clicks the zoom icon, displaying product information. The code snippet: <div class="container-fluid"> <div ...
As a beginner in jQuery, I am currently exploring how to create multiple popups within a window. My goal is to have each text trigger a different popup with unique content. Additionally, I would like the popups to close when clicked outside of the modal, r ...
My current design includes a stylized slick-slider that extends beyond the top border: However, I have set a fixed background for .slick-list, ensuring only the content (text, picture, and button) scrolls: How can I avoid the picture being cropped in t ...
Is there a way to manipulate the :before pseudo element when hovering over the main element? My goal is for the pseudo element to change its height when I hover over the main element. This is how my code looks: HTML <div class="object">& ...
I am trying to create an animation for an element that moves to the left when hovered over, but the code I thought was correct doesn't seem to be working in my fiddle. Here is the link to the fiddle I created: https://jsfiddle.net/feb8rdwp/3/ Based ...
https://i.sstatic.net/o41Qz.png Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right. <th class="fd-table--header-cell" scope="col"> <p class=&q ...
How can the main page container be properly sized as a percentage of the screen? While a "container-fluid" fills the entire view point, setting a % on the "container" class may not be valid. Is it possible to adjust margins and padding to achieve the desi ...
I am currently developing an Angular 5 application that requires responsiveness. I am encountering difficulties in making it responsive for different resolutions such as 1366X768 and 1920X1080 where font sizes vary. Issue 1: I have customized breakpoints ...
I am facing an issue with a row of images on my website. On a normal large display, the images align nicely across the screen. However, when viewed on a smaller screen, the images shrink and remain horizontal instead of stacking vertically. How can I make ...
I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...
Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them. What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to ...
My interest has been piqued on how to create a menu similar to the one on with all the images and text details. Does anyone have any insights on the technologies utilized for this? Are there any commercial options available that offer a similar functiona ...
I'm currently learning how to implement Bootstrap, but I've run into an issue. I created a dropdown in the navigation bar, but when I clicked on it, the dropdown didn't collapse as expected. The class="dropdown" didn't change to class= ...
I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>. The structure of the HTML is as follows: <ul id="selectable"> <li> <div id="1"></div> ...
I am facing an issue with displaying an MP4 video file on the mobile version of my website. Oddly, when I inspect the element in the smartphone browser, everything appears to be working fine. However, on the phone itself, the video simply turns off withou ...
I am currently working on a project that involves React and Material UI. One challenge I am facing is figuring out how to animate a grid item size change. The default size of the item is set to sm={3}, but when a user hovers over it, I want it to expand t ...
I've been working on centering two divs inside a parent div horizontally. The parent div is set to flex-direction: column so that the child divs stack one below the other, but I want them centered in the middle of the page. Although justify-content: ...