Problem with columns within columns in Bootstrap

Here is the HTML code I am working with:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
   <div class="row">
   <div class="col-lg-9 col-md-12">
      <div class="container">
         <div class="row bg-white">
            <div class="col-lg-4 col-md-6 p-2">
               <div class="card">
                  <div class="card-img">
                     <img src="#image" class="img-fluid">
                  </div>
                  <div class="card-img-overlay">
                     <div class="card-title">
                        <h5><a href="#">Title</a></h5>
                     </div>
                     <div class="card-text">
                        some texts
                        <div class="dlbut p-2">
                           <center>
                              <h5><a href="#">link</a></h5>
                           </center>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
<div class="col-lg-4 col-md-6 p-2">
               <div class="card">
                  <div class="card-img">
                     <img src="#image" class="img-fluid">
                  </div>
                  <div class="card-img-overlay">
                     <div class="card-title">
                        <h5><a href="#">Title</a></h5>
                     </div>
                     <div class="card-text">
                        some texts
                        <div class="dlbut p-2">
                           <center>
                              <h5><a href="#">link</a></h5>
                           </center>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>

I am encountering an issue with the column structure in my code. The first column, set to col-lg-9 col-md-12, works correctly on medium devices. However, the second column, set to col-lg-4 col-md-6, is not behaving as expected on small devices. I want it to take up half of the screen width on tablets and the full screen width on mobile phones, but it remains half-width on smaller screens too. I tried adding col-sm-12 with no success. Despite researching various solutions, including removing the second container, the issue persists.

htmlcssbootstrap-4

Answer №1

Recently, I purchased a license for this product. However, if you prefer to try it out for free, there is also that option available for a limited time: pingendo.com

The bootstrap is quite nice, but sometimes incorporating some enhancements can speed up the process.

Despite that, here's an example of how things could look:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="theme.css" type="text/css">
</head>

<body>
  <!--
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
        </div>
        <div class="col-md-6">
        </div>
      </div>
    </div>
  </div>
  <div class="row " draggable="true">
    <div class="col-md-12">
      <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-12">
            <div class="container">
              <div class="row bg-white">
                <div class="col-lg-4 col-md-6 p-2">
                  <div class="card">
                    <div class="card-img">
                      <img src="#image" class="img-fluid">
                    </div>
                    <div class="card-img-overlay">
                      <div class="card-title">
                        <h5><a href="#">Title</a></h5>
                      </div>
                      <div class="card-text"> some texts <div class="dlbut p-2">
                          <center>
                            <h5><a href="#">link</a></h5>
                          </center>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-6 p-2">
                  <div class="card">
                    <div class="card-img">
                      <img src="#image" class="img-fluid">
                    </div>
                    <div class="card-img-overlay">
                      <div class="card-title">
                        <h5><a href="#">Title</a></h5>
                      </div>
                      <div class="card-text"> some texts <div class="dlbut p-2">
                          <center>
                            <h5><a href="#">link</a></h5>
                          </center>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>-->
  <!-- This was created using my licensed Pingendo.com software -->
  <div class="row" draggable="true">
    <div class="col-md-6 col-12 col-sm-12 col-lg-6" >
      <div class="card" >
        <img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
        <div class="card-body text-center">
          <h4 class="card-title">John Catel</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="link">See Profile</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12 col-sm-12 col-lg-6">
      <div class="card">
        <img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
        <div class="card-body text-center">
          <h4 class="card-title">John Catel</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="link">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

Have you experimented with using bootstrap 4 like this?

<div class="container">
    <div class="row">
       <div class="col-sm-9">
         Level 1: .col-sm-9
         <div class="row">
         <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
    </div>
    <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
    </div>
  </div>
</div>

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

What was the recommended dimensions for CSS containers in 2018?

In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px. ...

cssuser-interfaceresponsive-design

Navbar toggler button is toggling open but failing to close afterwards

Below is my code featuring a collapsible navbar. The toggler button successfully opens the menu, but it fails to close it: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

javascripthtmljquerybootstrap-5navbar

Angular PrimeNG table does not successfully sort an array of class objects

The team data is initially stored in JSON format and then converted into a Team class. However, the table displaying this information is not sorted by default. Even though I have ensured that all necessary imports are included and added sortable columns, ...

htmlangulartypescriptprimeng

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

Guide on fetching data from a different php file using jQuery's .load() method?

I am trying to use a basic .load() function from jQuery to load a div element with an id from another file in the same directory when changing the selected option in a selector. However, I am having trouble getting it to work. Nothing happens when I change ...

javascriptphphtmljqueryajax

Webpage created from scratch encounters technical difficulties on mobile device browser

My website seems to be getting stuck at the beginning of a section, particularly on mobile browsers. You can check out the website here <section class="home-slider owl-carousel"> <div class="slider-item" style="background-image: url(images/bg ...

javascriptcsshtmlbootstrap-4owl-carousel

Make the child element's width equal to the parent element's height using only CSS

Is it possible to make the width of a child-div match the parent-div's height using only CSS? Check out this JsFiddle Demo Typically, I would use jQuery like this: $("#child-div").width($("#child-div").parent().height()); But I really need to ac ...

jqueryhtmlcss

Leverage JavaScript or CSS to create a paper button without the ink effect

Currently, I am utilizing JavaScript to dynamically create paper-buttons in the following manner: function createButtons(dieDefaults) { for(var i = 0; i < dieDefaults.length; i++) { var btn = document.createElement("paper-button"); var txt = d ...

javascriptcsspolymerpolymer-1.0

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

Unable to locate scripts.js file within the console

I am completely new to jquery and programming in general. I recently tried moving my javascript code to a separate file from the html for organization purposes. Initially, I tested it in my html by adding an alert to see if it was working properly. However ...

javascriptjqueryhtml

Choose the initial three sibling paragraphs following a separate heading two element

Is there a way to target only the <p> tags that come after the first 3 <h2> tags in CSS? I want to style the "one", "two", and "three" text as red, but not affect the "four" and "five" text. Below is an example of my code, but I'm unsure ...

htmlcsscss-selectors

Placing <object> within the existing HTML form

If a user enters the values 12345 into an input box on my webpage and clicks a button, an object will appear below or instead of the form. The code I have for this functionality is: <form name="form" action="" method="post"> <input type="text" ...

javascriptphpjqueryhtmlcss

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

htmlcsssvggimp

Having trouble with Python Bottle <br /> not functioning properly?

I encountered a perplexing issue and I am unsure of how to resolve it: There is a text area where users can input their text. For example, let's say the following is entered : This is the user's text After storing this in my database and ret ...

pythonhtmlcssbottle

What is the method for connecting a button in one component to a div in a different component within a reactjs application?

I am in the process of developing a ReactJS application that consists of multiple components such as a navbar, hero section, form, and footer. My goal is to have a button in the navbar that, when clicked, scrolls down to another component (the form) with ...

htmlreactjs

What is the best method for adding anchors or appending items in aspx pages?

I have created code for an image gallery on my webpage, "gallery.aspx". The situation is that I have an external aspx page with various links. When a user clicks on one of these links, I want them to be redirected to the image gallery but to a specific ima ...

javascripthtmlasp.netimagehyperlink

Applying a class to a single div element

I am struggling with adding a class to a specific div only if it contains an image. <div class="large-6 columns check-Div"> <div class="custom-table"> <div class="text"> <?php echo $latestimage; ?> </div> ...

javascriptjqueryhtmlcss

Unlocking Heading Options (h1, h2, h3, h4) in my JavaScript-powered rich text editor

I have nearly completed the development of a basic text editor. Users are able to write in an iframe and customize their text by making it bold, italic, etc. However, I am struggling to apply the same customization options to headings. My goal is to enabl ...

javascripthtmlcsseditor

Can you explain the distinction between <P> and <p> tags in HTML?

Currently, I am examining HTML documents by parsing them through Java and I have noticed that the p tag is one of the most frequently utilized tags. While I understand that it is used to create a new line, I am puzzled by the fact that in some documents I ...

html

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons