What is the best way to align an image to the left side of the screen using Bootstrap 4?

I want to create a unique login page using bootstrap. My goal is to have an image on the left side and a form on the right side of the page. I need it to be responsive so that the image will disappear on smaller screens to prevent distortion.

However, I am facing an issue where the image is not fully visible and gets "cut off" when it reaches the end of the form.

Below is my HTML code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 background_image">
        </div>
        <div class="col-md-6">
            <!-- LOGIN FORM HERE -->
        </div>
    </div>
</div>

I have attempted to use the following CSS without success:

.background_image{
  background-image: url(/static/picture.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
}

For a better visual representation, you can view the image here.

How can I ensure that the entire left side of the screen is filled with the image?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure the container's height is correctly set, consider the following options. If it's nested within another container, you can try:

<div class="container-fluid mh-100">

If you prefer a full-height layout using Bootstrap 4, you can also use:

.container-fluid {
  height:100vh;
}

Alternatively, you can specifically set the height of the div containing the image:

.background_image{
  ...
  height:200px;
}

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

Guide to creating a PHP script for interfacing with a MySQL database

Right now, I have just finished learning HTML and I am attempting to write PHP scripts for connecting to MySQL. However, the information on websites such as Google is confusing because they do not specifically outline how to connect using PHP only. Could ...

phphtmldatabase

Incorporate an external website's header and footer onto my own website

In the process of developing a new website, subdomain.example.com, it is important to note that it will operate in a separate environment from example.com. Despite this difference, both sites will feature the same layout in order to maintain a consistent u ...

jqueryhtmlajax

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

javascripthtmlarraysdomscope

Encountered an issue when attempting to insert data into MySQL using jQuery

Having some difficulties with jQuery and MySQL, specifically when trying to insert data into the database. Here is the code from my HTML file: <!DOCTYPE html> <html> <head> <title> Staff Registration </title> <body> < ...

phpjqueryhtmldebuggingmysqli

Struggling with getting the Encore Webpack Bootstrap4.5 navbar to function properly

I am currently diving into the world of Symfony, and I have chosen to leverage bootstrap for styling my page. Interestingly, when I include the link, <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

jquerysymfonywebpackbootstrap-4navbar

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

phpjquerycsscodeigniter

The integration of CSS into Laravel was unsuccessful

Below is the content of my index file located in views.admin: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet&qu ...

csslaravel

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

jqueryhtmlcss

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap

The Material UI date range picker fails to close once a selection has been made

I'm currently using the Material UI date range picker, but I've encountered an issue. After selecting the dates, the date picker does not close automatically. How can I make it close once the dates are selected? I couldn't find any specific ...

javascriptcssreactjsmaterial-ui

Submit your document without relying on the web control feature

Currently, I am developing a fingerprint web application where I will be retrieving the user's fingerprint using ActiveX controls. My goal is to display the fingerprint image on the webpage without requiring users to manually select and upload it usi ...

phphtmlasp.netactivex

Unifying flex and position:fixed

I'm having difficulties when it comes to displaying a modal dialog with a fixed position within a flex layout. The header and footer of the dialog need to be set in height, while the content section should have overflow with scrollbars. I chose the fl ...

htmlcssflexbox

Footer sidebar of Material Dashboard 2 (free edition) from Innovative Schedule

I noticed in the demonstration of Creative Tim's Material Dashboard 2 (free version) that the sidebar footer takes up a significant amount of space, up to 360px tall. This causes some menu items to be hidden if the browser window is not tall enough. ...

css

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

htmlcsstwitter-bootstrapbutton

obtain the string representation of the decimal HTML entity value

Similar Question: how to create iphone apps similar to ibeer, imilk, ibug, ibeer Using javascript to obtain raw html code Imagine having an html section like this: <div id="post_content"> <span>&#9654;<span> </div> ...

javascriptjqueryhtmlencoding

Combining 2 blocks to form a unified element

I receive a lot of HTML output like this: <div> <h4>This</h4><p>Value 9.6 m.</p> <h4>That</h4><p>Value 9.6 m.</p> <h4>The other</h4><p>Another 7.69 m.</p> <h4>And yet< ...

csscss-selectors

Problem Encountered with Bootstrap 3 Date and Time Selector

I am currently utilizing the date/time picker created by Eonasdan, which can be accessed here. Below is the HTML code snippet from the example: <div class="container"> <div class="col-md-10"> <div class='well'> ...

javascriptjquerytwitter-bootstrapdatepickerdatetimepicker

Allow the select option to be clicked, while preventing it from automatically filling the select input field in reactstrap's Input component

I have a select with an option called "+ Create new" When the user clicks on this option, I am displaying a modal to create a new option. However, I do not want this select option to show "+ Create new" after it is clicked. How can I make the o ...

javascripthtmlcssreactjs

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? https://i.sstatic.net/0UD0s.png Bel ...

javascripthtmlcanvas

Create a homepage landing page that only displays occasionally

Uncertain about the best way to phrase this question, a Wordpress user requested my help in creating a homepage that can branch off into two sections without loading every time a user visits the "home" page. Imagine visiting xyz.com and being greeted with ...

wordpresshtml