I've been working on achieving the effect where an image appears outside of the left side, while keeping the text div within the container grid. I've tried using container-fluid but that makes the text div too fluid and covers the width on the right side. Any suggestions on how to accomplish this?
Check out the code here: https://www.codeply.com/go/vTLom0BFoh
Utilize m-0 on the container to set the margin to 0px
Check out Bootstrap 4 spacing utilities here:https://getbootstrap.com/docs/4.0/utilities/spacing/
.left {
z-index: 0;
color: #fff;
}
.left:before {
background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop=");
background-repeat: no-repeat;
content: '';
display: block;
position: absolute;
z-index: -1;
width: 100%;
top: -15px;
left: -15px;
bottom: -15px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container m-0">
<div class="row">
<div class="col-sm-6 left"></div>
<div class="col-sm-6">
<h2>Title section</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
</div>
</div>
</div>To prevent cropping of your image, consider using the following CSS:
.left:before {background-size: cover;}Ensure that you are using high-quality images to avoid compression and distortion.
If your image is not displaying fully, try using the CSS property .left:before { background-size: contain; } or .left:before{ background-size: cover; } This should help resolve the issue.
If you want to create a layout where the right column takes up only half of the width, you can utilize a container-fluid and style the columns accordingly.
Here is an example to demonstrate how this can be achieved:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
...
Please note that this solution was inspired by this answer on Stack Overflow.
I'm facing an issue with my validation code. It doesn't seem to be working correctly. The two things I'm trying to validate are: Check if any textfield is empty Ensure that the password field has a minimum of 8 characters If either one o ...
Hey there! I'm currently working on a Django powered project. Here's a snippet of code from my HTML file (template): {% for l in items %} <td style="text-align: center" id=" ...
I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...
While trying to override Bootstrap styles, I encountered a problem. Whenever the user presses a primary button <button class="btn btn-primary">Test</button> An annoying blue outline appears and I can't seem to remove it. I attempted to o ...
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? ...
I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...
Can you explain the key distinctions between using CSS to center an element on a page, as opposed to using HTML tags for the same purpose? How would these different methods impact page layout, compatibility, and other factors? Thank you in advance! ...
I've been working on hosting a webpage on Heroku using Node.js. Instead of using the php method, I opted to go with Node and it's been going smoothly so far. However, I've run into a small issue. Here's what my Procfile looks like: web ...
My approach to opening the modal involves using: <a href="#myModal" data-toggle="modal"> However, upon opening the modal I encounter an issue where everything is covered with the backdrop color and becomes unclickable. When attempting to close the ...
To verify support for CSS properties such as border-radius, use the following code snippet: if(document.createElement('test').style.borderRadius===''){ //some code } But how can I check for support of linear gradients? The declaration ...
Is there a way to create a function that will automatically attach itself to an element when it comes into view? I have multiple elements on my page - element1, element2, and element3. Instead of using a large if statement, I would like to write a functio ...
Having Trouble with PHP Upload: Encountered an issue: Undefined index: file in Error on line: $count = count($_FILES['file']['name']); Tried numerous codes to fix this error, but none have worked so far PHP Code: <?php $count ...
I need to arrange 3 blocks as follows: The first block should be 200px wide and aligned with the left side. The second block should start right after the first block and have its right edge at exactly 50% width of its container. The third block should ta ...
I have an HTML page with an input type text field. I want to be able to paste a URL, for example , into this text field and then click a button labeled "download" in order to download the linked file onto my computer. I am looking to implement this funct ...
I am attempting to showcase a popup box from a div using the following code. Despite successfully adding a record, the div does not show up. I have experimented with $("#div").html. Script: <script src="scripts/jquery-1.11.1.min.js "></script&g ...
As I work on building a website for practice, I encountered an issue where the image I want to span across the webpage at 400px height is replicating itself. The height seems fine but there are duplicate images appearing. 1) What could be causing this du ...
I am trying to export a report to a plain HTML file from Jasper Reports without it displaying within the viewport. When using &output=pdf in the URL, I successfully get a PDF file; with &output=xls, an XLS file is generated. However, when using &am ...
I am attempting to present the value of my variable in a textBox using Jade, but I am encountering issues. I have tried the following options: value="#{startDate}" value="#{{startDate}}" value="{startDate}" value={{startDate}} I am aware that it is func ...
After browsing through similar questions, I couldn't find the answer I was looking for. As a newbie in programming experimenting with JavaScript Progress Bar, I encountered an issue where the progress bar would pause and the counter wouldn't coun ...
Apologies for the lengthy post, but some background information is necessary before I can pose my question as the situation is quite convoluted. I am faced with the challenge of incorporating two different fonts into a newsletter. The first font, Cyclone ...