breaking down the bootstrap grid into smaller grids

In my web application, I utilized bootstrap to ensure responsiveness across all devices. I have segmented the main row into three columns (e.g. the second row). Now, I am looking to further divide each of these columns into sets of 12 columns each (akin to a third row) and subdivide them. In the process of breaking down the main column into sub-columns, should I take into account the screen size? If so, what would be the grid specifications for this scenario as the generated columns would vary in width? Alternatively, is it necessary to use the table tag for such purposes?

csshtmltwitter-bootstrap

Answer №1

Utilizing the Bootstrap grid system is an effective way to manage nested elements, while maintaining a consistent responsive design approach.

To nest a child element in Bootstrap, it is recommended to use a row within a column.

For example:

<div class="container">
  <div class="row">
    <div class="col-md-8">

    </div>
    <div class="col-md-8">
      <!-- Adding a child element here and splitting col-8 into 2 sections. -->
      <div class="row">

        <!-- Remember, all rows in Bootstrap are based on 12 columns --> 
        <div class="col-md-6">

        </div>
        <div class="col-md-6">

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

It is important to note that Bootstrap always considers all rows to consist of 12 columns.

Answer №2

Although @kishanio's explanation may seem clear enough, I have decided to provide a more detailed breakdown for better understanding.

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

Furthermore, I believe that the code snippet below will help you achieve the desired outcome:

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>
<div class="row"> **this one tricky? naaa**
    <div class="col-md-4"> **split page in 3's** What is one-third of 12? 12 divided by 3 equals 4
        <div class="row"> **only utilize first one-third of the page**
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
        </div>
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </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

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Guide on transforming a select dropdown into a ul dropdown

I am attempting to transform my select dropdown menu into an unordered list (ul) in order to create a bootstrap button that will display the ul, allowing the list items to function as options. <select id="sortField" onchange="refreshPage('{$pageBa ...

javascriptjquerytwitter-bootstrap

Encountering issues with the display of JSON data in MVC

Question: How can I pass JSON data from my controller to the view and render it using JavaScript? [HttpGet] [AllowAnonymous] public ActionResult Index() { ServiceReference1.ipostep_vP001sap0003in_WCSX_comsapb1ivplatformruntime_INB_WS_C ...

javascripthtml.netasp.net-mvcasp.net-mvc-4

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

javascriptjquerycsshtml

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

javascriptcssreactjsmouseeventsettimeout

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve th ...

javascripthtmlcssbootstrap-4

What is causing the gradient to not fully extend across the entire element?

In my CSS, I have the following styling for a button: <a class="button"> <span>Y</span> </a> .button { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; ...

cssgoogle-chromewebkitgradient

Remove Chosen Pictures (Checkbox/PHP/MySQL)

I am currently displaying images from a Database using the following HTML code: <li> <input type="checkbox" id="1" /> <a rel="gallery_group" href="images/big/1.jpg" title="Image 1"> <img src="images/small/1.jpg" alt="" ...

javascriptphpjqueryhtmlmysql

Using jQuery to access the value of the CSS property "margin-left"

I created a JavaScript game with moving divs that have different transition times. The game includes a function that is called every 1/100 seconds, which checks the position of the divs using: $("class1").css("margin-left") Here's the strange part: ...

javascriptjqueryhtmlposition

Is there a skilled coder available to troubleshoot this carousel's HTML code?

Hello, I am struggling with the code snippet below that uses Bootstrap to create a carousel. The next and previous buttons are not working properly. <div id="testimonial-carousel" class="carousel slide" data-ride="carousel&qu ...

htmlcssbootstrap-4

The exterior DIV does not conform to shrinking dimensions

I've set the display property to inline-block, but the htmlDiv div in this code snippet is not behaving as expected. It's acting as though the inner divs are next to each other even when they're not. How can I fix this? If it's unclear ...

htmlcssposition

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

htmlcsswordpress

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

Populate a form with data retrieved from a MySQL query result

One aspect of my project involves a specific interface called 'designation.php' that contains a form. The goal is for users to enter a 'designation code' (which serves as the primary key) and then click the 'update' button, pr ...

phphtmlmysqlajax

Instructions for creating a JavaScript click function that iterates through all records, not just the initial record

Although I'm new to web development and still learning the basics of html, javascript, etc., I have a problem that seems quite simple. The challenge lies in understanding javascript functions, which I find particularly tough to grasp. Here's what ...

javascriptc#htmlasp.netasp.net-mvc

What is the function of table widths in accommodating wider details during insertion?

What happens when a detail width is set to <td width="10"...> and something wider, like a picture that is 20 pixels wide, is placed in that detail? ...

html

What are the possibilities for modifying a MySQL database using HTML?

Currently, I have a MySQL database managed through phpmyadmin that I would like to present as an HTML table for easy editing of records and columns directly. I am unsure about the terminology to use when researching possible solutions. What options are av ...

phpmysqlhtmldatabaseedit