Adaptive Bootstrap 4 design concept

I am learning bootstrap and working on my website which requires a section similar to the one shown in this image. Can anyone guide me on how to achieve this?

Below is the code I have written so far:

<div class="row mfoo">
  <div class="col-5 illus col-xs-12">
    <img src="./images/illustration-features.svg" />
  </div>

  <div class="col-md-7 col-xs-12 text-right">
    <div class="row">
      <div class="col-7 col-xs-12">
        <p class="features_title">  </p>
        <p class="features_desc">  </p>
      </div>
      <div class="col-5 col-xs-12">
         <p class="features_title">  </p>
        <p class="features_desc">  </p>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-7 col-xs-12">
        <p class="features_title">  </p>
        <p class="features_desc">  </p>
      </div>
      <div class="col-5 col-xs-12">
        <p class="features_title">  </p>
        <p class="features_desc">  </p>
      </div>
    </div>
  </div>
</div>
csslayoutbootstrap-4responsive

Answer №1

Remember not to use col-xs-* as the xs size is no longer available in bootstrap-4

Instead, stick with using col-md-5/7

Check out the code in action

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>



<div class="container">
  <div class="row mfoo">
    <div class="col-md-5 illus">
      <img src="./images/illustration-features.svg" />
    </div>

    <div class="col-md-7">
      <div class="row">
        <div class="col-7 col-sm-12">
          <p class="features_title"> dsf</p>
          <p class="features_desc"> df</p>

        </div>
        <div class="col-5 col-sm-12">
          <p class="features_title"> df</p>
          <p class="features_desc"> df</p>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-7 col-sm-12">
          <p class="features_title"> </p>
          <p class="features_desc"> </p>

        </div>
        <div class="col-5 col-sm-12">
          <p class="features_title"> </p>
          <p class="features_desc"> </p>
        </div>
      </div>

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

Answer №2

To achieve the layout you want, I have created a solution based on your code:

<div class="row mfoo">
  <div class="col-lg-5 col-sm-12 illus col-xs-12">
    <img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_1280.jpg" />
  </div>

You can view the complete code here: https://jsfiddle.net/wlum/kva1g5mp/7/

I modified the col-5 to col-lg-5 so that on smaller screens it will display as col-xs-12.

Answer №3

Understanding the Bootstrap Grid System Within Bootstrap 4, there are specific classes designated for mobile devices. For smaller screens, the .col-sm- class is utilized, while for extra small screens, the .col- class is applied.

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

Table borders not displaying properly in Chrome when cells are hidden

I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this spec ...

htmlcssgoogle-chromehtml-table

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

javascriptcssangulartypescriptsass

Hovering over an option in Vue-Bootstrap b-select

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

cssvue.jshoverbootstrap-vueselect-options

Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...

htmlcssbootstrap-4

Implementing specific CSS styles for images that exceed a certain size limit

Currently, I am facing a dilemma as I work on developing a basic iPhone website that serves as a port for my blog. The main issue I am encountering is the need to add a border around images above a specific size and center them in order for the blog to hav ...

javascriptiphonecss

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

cssrstudioquartoreveal.js

Spring Boot application is running smoothly with the CSS file, but the JavaScript file fails to load

My index.html file has the following structure: <head> ... <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/> <script th:src="@{/js/app.js}" type="script" async></scr ...

javascriptcssspring-bootspring-mvc

CSS - I add space between the components of the layout, but the color of the space does not match the body color

I am aiming for my website layout to have distinct margins between the left and right side of the content, as well as between the header and navbar. However, I do not want these spaces' colors to change to match the body's background color. http ...

htmlcss

Is it feasible to have a set number of character lines per <p> tag without relying on monospaced fonts?

I am facing the challenge of breaking a large text into paragraphs of equal size, with the same number of string lines in order to maintain uniformity. Currently, I am using PHP and the following code to achieve this: function arrangeText(){ if (have_ ...

phpjavascriptjquerywordpresscss

Tips for modifying line spacing in R Shiny?

I want to adjust the line spacing in a specific actionButton() displayed in a Shiny App, as shown below and with the MWE code provided at the end. How can I change the line spacing between lines? This adjustment should only affect this action button and n ...

htmlcssrshiny

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

javascripthtmlcsscodepen

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

Ways to maintain the collapsed sidebar state during redirection to a new page

I'm currently working on an admin dashboard and I want the sidebar to remain collapsed even when transitioning from one page to another. Initially, I prefer it to be expanded but after clicking the hamburger toggle button, it collapses. However, I don ...

jqueryhtmlcss

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

androidcsssvgoverflowsamsung-internet

Demystifying Vertical Alignment: Everything You Need to Know

Struggling with vertical alignments has proven to be more complicated than expected. Despite reading numerous resources on stackexchange, a common understanding of the process remains elusive. After gathering some guidelines, it turns out that vertical-al ...

htmlcssvertical-alignment

passing a javascript variable to html

I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML." My objective is to inject the content of "finishedHTML" into the test div ...

javascripthtmlcssvariables

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

I am currently working on creating a single-row CSS table with multiple cells, aiming to vertically center text within each cell. The desired table layout is as follows: <table width="100%" height="54" border="0" bgcolor="red"> <tr> <t ...

htmlcssvertical-alignmentcss-tables

Is there a way to align an image alongside text in CSS with Bootstrap 4?

I am working on creating a box that displays the profile photo of a user along with their nickname on the right side. To achieve this, I have attempted various approaches while utilizing Bootstrap 4: My initial attempt involved using columns, but it did n ...

htmlcsstwitter-bootstrapbootstrap-4