Creating a custom grid layout with Bootstrap 4

Take a look at the image link provided below.

https://i.sstatic.net/yhbx9.jpg

I am attempting to use boostrap4 to create a grid layout similar to the one shown in the image. On desktop, the first column should be col-5 width and the other 3 equal. On mobile, the first column should be col-12 and the other 3 equal.

Here is my HTML code:

<div class="row">
  <article class="col-5">
    <h1 class="text-uppercase">Some Contents</h1>                
  </article>  

  <article class="col">
    <span class="counter">10</span>
  </article>  
  
  <article class="col">
    <span class="counter">10</span>
  </article> 

  <article class="col">
    <span class="counter">10</span>
  </article>  
</div>

This code works as intended on desktop but not on mobile devices. If anyone can offer assistance or advice, it would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

Require breakpoints to be included for smaller devices

.text-uppercase{
        background:#f0f0f0
      }
      .counter{
        background:#f0f0f0;
        font-size:68px
      }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <div class="row">
      <article class="col-md-5 col-sm-12">
        <h1 class="text-uppercase">Some Contents</h1>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>
    </div>

Answer №2

If you want to achieve this layout, remember that Bootstrap follows a mobile-first approach.

  <div class="row">
        <article class="col-12 col-md-6">
            <h1 class="text-uppercase">Some Content</h1>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>
    </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

The concept of setting a value is not defined in JavaScript when compared to

Within my primary python script, the following code snippet is present. @app.route('/accounts/test/learn/medium') def medium(): word = random.choice(os.listdir("characters/")) return render_template('accounts/test/medium.html', word=w ...

javascriptpythonhtmlflask

The code in check.js causes a square of dots to emerge on the screen in Skype

Trying to add a Skype call button to my page has been successful, but there's one issue - a pesky white dot keeps appearing at the bottom of the footer. The script source I used is as follows: <script src="http://download.skype.com/share/skypebu ...

javascripthtmlskype

Utilizing the power of jQuery alongside Angular 4

I am trying to display a bootstrap modal but keep encountering an error message: SectionDetailComponent.html:54 ERROR TypeError: $(...).modal is not a function This is how my .angular-cli file looks like: "scripts": [ "../node_modules/jquery/dist/jq ...

jqueryangulartypescriptbootstrap-4

Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...

javascripthtmlcssasp.net

Executing a SQL statement effortlessly with the press of an HTML button using PHP

Currently, I am working on a basic PHP website that retrieves a list of salespeople from a MySQL server based on a selection made from a drop-down box. I have successfully added a button next to each result with the intention of running a PHP script using ...

phphtmlmysqlsubmit-button

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/ In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of the ...

javascriptjqueryhtmlcssimage

Switching from a vertical to horizontal tab layout in Angular 4 Material 2 using MD-Gridlist

I'm currently trying to modify the tabbing functionality within an MD-Gridlist so that it tabs horizontally instead of vertically. I've experimented with tab indexes but haven't had any success. My goal is to enable horizontal tabbing throug ...

htmlangularangular-material2

"Learn how to extract the image URL from the configuration file (config.json) within the assets folder, and then seamlessly display it within

In my Angular project, I have a configuration file located in the assets folder: { "brandConfig": "brand1", "brand1": {"urlPath": "http://192.168.168.60:8081/mantle-services", " ...

javascripthtmlangularhttpfrontend

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

I want to create a versatile textbox on my website that allows users to change the text format as they desire. Unfortunately, I am facing some issues with implementing this feature. Here is the code I have developed so far. <body> <h1>< ...

javascripthtml

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

jqueryhtmlcsspreload

relocate information to another div when the page is resized

I am working on a design where all the text is inside one div on mobile and tablets, but on desktop, the p tags move to the div below it. Each div has its own unique background image. Here's how the markup looks like: <main> <div class= ...

javascriptjqueryhtmlwindow-resize

Interactive double content slider showcasing dynamic features

I am attempting to customize a W3 slider to be more dynamic. The original slider can be found at this link. My goal is to modify the slider so that only the bottom images are displayed, with only the current image showing at the top. For a visual referenc ...

javascriptphpcssmysqlmysqli

Is there a way to update a PHP include file without needing to refresh the page?

I've been learning as I go, so some of my questions may seem basic or beyond my current knowledge level. However, I find that peer explanations, examples, and advice are the most effective way for me to learn. Thank you in advance for your help. Usin ...

phpjquerycssajax

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

csstwitter-bootstrap

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Encountering an issue with importing external JavaScript files in the App.js file during React development

Currently, I am embarking on the development of a basic starter app that deals with SMTP anonymously in React. This project is primarily for educational purposes. Prior to diving into actual development work, I have decided to keep things simple and focus ...

javascripthtmlcssreactjs

Switch the checkbox attribute for multiple items within a carousel using Angular 2/Typescript

I am currently working on a carousel feature where each item has a checkbox above it. My goal is to be able to click on an item and have its corresponding checkbox checked. The current code successfully achieves this, but the issue I'm facing is that ...

htmlangulartypescript

When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success. Highcharts: Ensure y-Axis 0 value is at chart bottom http://jsfiddle.net/tZayD/58/ $(functi ...

javascriptjquerycsschartshighcharts

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Can someone help me align my SnackBar with the LinearProgress so that they both have an auto-hide duration of 4 seconds? I've been struggling to figure it out for hours and haven't found a solution yet. Could the issue be in the useEffect part of ...

javascriptcssreactjsmaterial-ui