Whenever the screen size transitions to medium in bootstrap, my column mysteriously vanishes

Trying to replicate a similar design from this website: . One issue I'm facing is that the white columns I created disappear when I resize my screen. Here's the code:

<div class="pokaz">
    <div class="container">
        <div class="row pt-5">
            <div class="col-lg-6 bg-white" style="text-align: center;">
                <svg ...> ... </svg>
                <h1 ...>Lorem ipsum</h1>
                <h4 ...>Lorem ipsum dolor sit amet...</h4>
                <button type="button" class="btn btn-outline-secondary">Read more</button>
            </div>
            <div class="col-lg-6 bg-white">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12 bg-white"></div>
            <div class="col-lg-6 bg-white" style="text-align: center;">
                <svg ...> ... </svg>
                <h1 ...>Lorem ipsum</h1>
                <h4 ...>Lorem ipsum dolor sit amet...</h4>
                <button type="button" class="btn btn-outline-secondary">Read more</button>
            </div>
        </div>
    </div>
    <div class="container pb-5">
        <div class="row">
            <div class="col-lg-6 bg-white" style="text-align: center;">
                <svg ...> ... </svg>
                <h1 ...>Lorem ipsum</h1>
                <h4 ...>Lorem ipsum dolor sit amet...</h4>
                <button type="button" class="btn btn-outline-secondary">Read more</button>
            </div>
            <div class="col-lg-6 bg-white">
            </div>
        </div>
    </div>
</div>

<p>Need some assistance with this. Link to Codepen will be provided in the comments.</p>
htmlcssbootstrap-4frameworks

Answer №1

**To make the empty area disappear, remove the class "col-lg-6 col-md-12 bg-white" marked with "??" as it is currently empty.**

<div class="container">
   <div class="row">
      <div class="col-lg-6 col-md-12 bg-white">
            **??**
       </div>
       <div class="col-lg-6 bg-white" style="text-align: center;">
            <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
            </div>
         </div>
         <div class="container pb-5">
            <div class="row">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

               </div>
            </div>
         </div>
      </div>

Answer №2

After some troubleshooting, I was able to come up with a solution that worked perfectly for me.

<div class="col-lg-6 p-0">
<img src="img/hotel-room.jpg" class="img-fluid" alt="Responsive image">
</div>

By including the photo and adding "p-0" to the col's class name, the photo now appears cleaner and more visually appealing.

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

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript

"Ensuring a DIV element has a height of 100% within

Is there a way to set and enforce a div's height to be 100% of the browser window, another div, or a table cell without resorting to complicated hacks found on Stack Overflow or other websites? ...

csshtmlheight

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Tips for decreasing the placeholder font size within a mobile media query

I'm encountering a strange issue. I successfully managed to decrease the font size of the placeholder text for my desktop design, but it's not working for my mobile phone media query. I started with the desktop version and used a max width of 480 ...

htmlcss

The menuToggle feature works flawlessly on desktops after integrating my AngularJS module, but unfortunately, it is not functioning

I have successfully integrated autosuggestion using AngularJS material library into my web application. Everything seems to be working fine except for one issue. When I include ng-App="MyApp2", the menuToggle button stops functioning only on mobile devices ...

javascripthtmlcssangularjs

Insert some padding above and below every line of text that is centered

I am looking to achieve a specific layout for my website. https://i.stack.imgur.com/dKT52.jpg Here is what I have attempted: <h2>Make search awesome using Open Source</h2> .banner .section_title h2 { font-family: "Oswald", Arial, sans- ...

htmlcss

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...

htmlcssangularangular8ngx-datatable

When using a Kendo Grid with a Checkbox as a column, the focus automatically shifts to the first

Whenever I select a checkbox in my Kendo grid, the focus automatically shifts to the first cell of the first row. How can I prevent this from happening? Here is the code I am currently using when a checkbox is checked: $('#approvaltranslistview' ...

javascriptjqueryhtmlcheckboxkendo-grid

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

htmlcss

Create a web design where two HTML elements with full width are positioned to overlap each other,

I am facing a design challenge where I need sections to span the full width of the page, but the content is contained within an article. Additionally, there is an interactive aside that needs to float above the full-width sections. Both the article and as ...

javascriptjqueryhtmlcssz-index

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Embedding a stylesheet into an HTML document can be done automatically

Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a ...

javascripthtmlcssbuildgulp

Tips for preventing double foreach loops in Laravel when dealing with backward relationships

I'm attempting to display variables using the following relationships: First: public function group(){ return $this->belongsTo(Group::class); } Second: public function joinGroups(){ return $this->hasMany(JoinGr ...

javascriptphphtmllaravel

Embed the aspx file within the background-image attribute similar to how an image source is

Within my asp.net application, there is an image tag linking to another aspx file in the src attribute, displaying a picture. <img src="/picture.aspx?Param=3" alt="picture"/> I need to convert the image tag into a div with a background-image proper ...

javascripthtmlasp.netimagebackground-image

Updating the border color of a floating form using React Bootstrap

Is there a way to customize the color of the border to something other than blue in React Bootstrap? https://i.sstatic.net/ScIw1.jpg ...

cssreactjsbootstrap-4react-bootstrap

Is there a way to eliminate the CSS width and height properties and instead establish a custom max-width for an image tag?

Currently, I have incorporated my theme's CSS file into my application and it contains the following code: .status .who img { float: left; height: 40px; margin-right: 10px; width: 40px; } However, I want it to appear like this: .status .who ...

jqueryhtmlcss

Using the glob function within a PHP include statement to search through numerous web directories

Greetings to all readers, this is my first time posting here. I have limited experience with PHP and would appreciate your patience as I navigate through it. I manage a large static website that heavily relies on PHP includes for various sections like hea ...

phphtmlincludeglob

Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected. Here is the code snippet: <a href="#" target="_blank" style="font-family: Arial, ...

htmlcss

Looking for a solution to split barcode data across two text fields

I am looking to enhance my data input process by utilizing a barcode scanner in conjunction with JQuery. The barcode scanner I have reads both the serial number and model name of each product, but currently displays them together in one text field. Is ther ...

javascriptjquerycssajax