Creating a responsive two-column grid in Bootstrap 4.4 is a straightforward process that

Currently using Bootstrap 4.4.1.

Experimented with a 2-column layout: Image on the left and Text on the right.

<section class="resume-section-first p-3 p-lg-5 d-flex align-items-center" id="about">

        <div class="w-100">
            <div class="block">
                <div class="row">
                    <div class="w-50">
                        <div class="span4">
                            <img class="img-left w-100" src="/img/profile-lg.jpg"/>
                        </div>
                    </div>
                    <div class="w-50 p-5">
                        <div class="span4">
                            <div class="content">
                                <div class="content-heading">
                                    <span>Software Engineer</span>
                                    <h2>Test Title</h2><br>
                                </div>
                                <p>
                                    Experienced Software Engineer in developing Web Application, as well as building robust RESTful API.
                                    Expert in System Architecture Design, Development and Maintenance of Software systems.
                                    Equipped with a diverse and promising skill-set required in the market.
                                    Proficient in various platforms and languages. Able to effectively self-manage during independent
                                    projects, as well as collaborate as part of productive team.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Issue arises when viewing on small screens; looking to display Full Column for Image and Text. Attempted to use w-md-100 or w-xs-100 without success.

Seeking guidance on resolving this problem.

cssbootstrap-4grid-layout

Answer №1

Have you considered utilizing the grid layout classes like col-sm-*, col-md-*, etc.? Your scenario seems well-suited for this approach. With these classes, the columns will span all 12 columns on small screens and occupy 6 columns (50% width) on sizes >= 768px; additional details available here

See the functional example below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section class="resume-section-first p-3 p-lg-5 d-flex align-items-center" id="about">

  <div class="w-100">
    <div class="block">
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="span4">
            <img class="img-left w-100" src="https://www.akberiqbal.com/Jumbo.jpg" />
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <div class="span4">
            <div class="content">
              <div class="content-heading">
                <span>Updated</span>
                <h2>Test Title</h2><br>
              </div>
              <p>
                Experienced Software Engineer in developing Web Application, as well as building robust RESTful API. Expert in System Architecture Design, Development and Maintenance of Software systems. Equipped with a diverse and promising skill-set required in the
                market. Proficient in various platforms and languages. Able to effectively self-manage during independent projects, as well as collaborate as part of productive team.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Check if the data-indices of several div elements are in sequential order using a jQuery function

Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs. Here is an exam ...

javascriptjqueryhtmlcss

Issue with displaying images on Boostrap 4 Carousel

I'm working with a bootstrap 4 carousel that contains 3 images. I'm trying to set the carousel to full screen, where the height adjusts to the device screen and displays the images properly. However, I'm facing an issue with the image width ...

htmljquerytwitter-bootstrapbootstrap-4carousel

Using JQuery and Bootstrap, add or remove rows dynamically

For my project, I am creating tests (in English, physics, etc.) using JSTL, Bootstrap, and jQuery. I need a form to create a Test with questions and answers. However, I am facing an issue. When I try to delete a question, the answers that were added are no ...

jqueryhtmlbootstrap-4

Div I add to page is not being styled by CSS

I'm currently developing a Chrome extension that provides a preview of a webpage when hovering over a hyperlink to it. To achieve this, I am creating a div and filling it with different items. However, the issue I'm facing is that the CSS styles ...

htmlcssgoogle-chromegoogle-chrome-extensionstylesheet

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Is it feasible to generate a realistic arrow using CSS and then rotate it?

Can a fully functional arrow be created using CSS alone? Here is the method I used to create just the arrowhead: http://jsfiddle.net/2fsoz6ye/ #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10p ...

css

Align two spans within a div using the margin auto property

I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins... https://jsfiddle.net/5k4pnmf7/ <div class='foo'> <span class='bar& ...

htmlcss

Is there a substitute for image cropping aside from the CSS clip property?

Looking to create an image gallery where thumbnails are cropped to 150px x 150px, but struggling with non-square rectangular images of various sizes. Adjusting width and height distorts the images. Are there alternative CSS or jQuery options for cropping ...

jquerycssgallerythumbnailscrop

Modify the color of a unique word within a cell in a gridview

How can I change the color of specific keywords in a gridview cell without affecting all words? Here is the sample code: protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) ...

c#cssasp.netgridviewcolors

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

javascriptcssvue.jsvuejs2

Variety of techniques for sampling in Weka

I am facing the challenge of dealing with an unbalanced dataset. In order to address this issue, I have been experimenting with various resampling methods. Currently, I am familiar with three main techniques for handling sampling: 1. Random sampling 2. Cro ...

machine-learningbootstrap-4datasetwekaresampling

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as e ...

htmlcssuinavigationbar

Unexpected vertical line in MUI5 Stepper appears when invoking from a function

Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...

cssreactjsmaterial-uiuistepper

"Exploring the screen size options in Chrome version 38 using the

After the recent update, Chrome has introduced several new features for web developers. However, I've noticed that when you drag the screen with the developer tools open, it used to display the exact screen width size in the top right corner. Now, it ...

htmlcssgoogle-chrome

Discover how to utilize Firebug in Java to access a node's CSS properties

Is there a way to access all properties (CSS, etc) of web page nodes using Firebug within Java code without relying on XPath? I would like to retrieve all available properties instead of checking for them individually. Any advice on how to achieve this? ...

cssseleniumwebdriverselenium-webdriverfirebug

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

javascripthtmlcss

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

htmlcss

Troubination of Bootstrap CSS is causing issues on Floating Action Menu

I've implemented a Floating Action Menu using JQuery and CSS: HTML: <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <div id="hamburger" class="waves-effect waves-light"> <div id="wrapper"> <span ...

jquerycssbootstrap-4floating-action-button

What are the steps for distributing a styled React component?

My goal is to release a UI library using React, but I am struggling with how to handle styles. When I write code in a project, I typically use webpack and babel to build my code, resulting in the creation of a *.css file. import React from 'react&ap ...

cssreactjsnpmwebpackbabeljs