Personalized Bootstrap grid rows and columns

https://i.sstatic.net/R0yFY.png

As a beginner in Bootstrap, I am having trouble achieving this specific layout in Bootstrap 4 grid. The areas marked in red are not appearing as expected.

Here is what I have attempted so far:

<div class="row">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
    </div>
</div>
cssbootstrap-4

Answer №1

I trust this information will be beneficial to you -:

<div class="container">
  <div class="row green" style="height: 50px;"></div>  
  <div class="row">
    <div class="col-sm-6 red" style="height: 100px;"></div>
    <div class="col-sm-6">
      <div class="row yellow" style="height: 50px;">
      </div>
      <div class="row blue" style="height: 50px;">
      </div>
    </div>
  </div>
</div>

<style>
  .green{
    background: green;
  }
  .red{
    background: red;
  }
  .yellow{
    background: yellow;
  }
  .blue{
    background: blue;
  }
</style>

https://i.sstatic.net/uIVbo.png

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

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

jqueryhtmlcsstwitter-bootstrap

Trying to connect a webpage to my CSS file

Lately, I've been diving into building a new website. It's still in its early stages and unfortunately, I'm struggling to get the style.css file to cooperate. Despite my best efforts scouring the internet for fixes, I haven't had much l ...

htmlcss

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

javascriptjqueryhtmlcss

Creating a seamless and interactive online platform

I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage. Let me explain further: Here is my current setup so you can understand what I am trying to achieve. By dynamic, I mean that when the page ...

javascriptcsshtmlweb

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any

I'm facing a puzzling issue that has me stumped. I'm working on a website and have a simple footer with a link at the bottom: <div id="sitefooter"> <a href="#">This is the link</a> </div> My stylesheet includes styling f ...

csssafaristylesheetstyles

Utilizing Compass SCSS with Blueprint for Optimal Overflow Settings

I've been working with blueprint through Compass, but I'm facing an issue where longer pages don't have scroll bars. It seems like the default setting for overflow is 'hidden'. Since this appears to be the standard, I assume there ...

csscompass-sasssassblueprint-css

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

javascripthtmlcsscharts

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

Using a CSS button to activate a JavaScript function: A step-by-step guide

My current project involves writing a script to change the color of text when a specific button is clicked. The idea is that clicking the "Change color1" button triggers the text color change using the following code snippet: <button onclick="myFunction ...

javascriptcss

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

I have constructed a panel that adjusts its size based on the device's screen using responsive design techniques. The code for this panel is as follows: <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-for ...

jqueryhtmlcssjquery-mobilejquery-mobile-panel

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

htmlcss

Is nesting possible with the &:extend function in LessCss?

I've recently been exploring the Less &:extend feature. My goal is to nest multiple extends - essentially extending a class that itself extends another class. However, after testing it out, I'm not sure if it's working as expected. It ...

cssless

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

javascriptjquerycssangularjs

How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png The issue I'm facing is that I'm unable to display the right border correc ...

cssreactjsmaterial-uidatagrid

How can I modify the CSS styles for a custom jQuery widget?

I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this? <!doctype html> ...

jqueryhtmlcssjquery-ui

Utilize CSS to prioritize the image and ensure it is responsive

I'm utilizing the 'featurette' feature in bootstrap. Currently, the page displays text on the left and an image on the right. As you reduce the browser size, they stack on top of each other, with the text appearing above the image. How can I ...

cssimageresponsive

Issues with AngularJS Opening the Datepicker upon Click

Currently, I am developing an application using AngularJS, JQuery, and Bootstrap. In this project, I have incorporated a customized date range picker from www.daterangepicker.com. Issue: The problem arises when I attempt to open the date range picker by c ...

jqueryangularjsbootstrap-4

Mobile version shows white spaces when using particles.js and bootstrap 4.6

This is how I implement particles.js: <div id="particles-js"></div> @RenderSection("Header", required: false) <main role="main" class="container"> @RenderBody() </main> <script> ...

cssasp.netuser-interfaceparticles.js

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2