Struggling to configure the tablet grid system in Bootstrap - accompanying fiddle provided

I'm currently working on organizing the bootstrap grid system for the tablet version. I have 15 boxes that need to be arranged. Everything looks good on desktop and mobile, but I'm struggling to get it right for tablet resolution. col-sm-*

.newcss{
    background-color: red;
    height: 120px;
    width: 120px !important;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
}
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-1"></div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 1</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 2</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 3</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 4</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 5</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-1"></div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 6</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 7</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 8</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 9</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 10</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-1"></div>
    <div class="col-xs-4 col-sm-2 newcss">
        <p>Box 11</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 12</p>
    </div>

    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 13</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 14</p>
    </div>
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss">
        <p>Box 15</p>
    </div>
</div>

FIDDLE

If anyone has any suggestions and can offer assistance, please do so.

jqueryhtmlcsstwitter-bootstrap

Answer №1

Utilizing a 12 column layout, Bootstrap requires careful alignment with the grid system. To ensure proper padding on the left and right sides of the content, consider implementing the following approach:

VIEW THE FIDDLE

.newcss {
            background-color: red;
            height: 120px;
            width: 120px !important;
            border-right: 5px solid white;
            border-bottom: 5px solid white;
            float: left;
        }
<div class="row">
        <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div>
        <div class="col-lg-6 col-md-6 col-sm-10 col-xs-10">
            <div class="newcss">
                <p>Box 1</p>
            </div>
            <div class="newcss">
                <p>Box 2</p>
            </div>
            <div class="newcss">
                <p>Box 3</p>
            </div>
            // Remaining boxes omitted for brevity
        </div>
        <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div>
    </div>

Answer №2

While I would suggest avoiding the grid system you are currently using (with fixed, absolute heights and widths that undermine the purpose of having a responsive grid), there appears to be a straightforward solution to your immediate issue. You have these HTML elements scattered throughout your code:

<div class="col-lg-3 col-md-3 col-sm-1"></div>

These empty elements are causing disruptions in your layout. Remove them, and it should resolve the issue you are facing.

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

ng-repeat refreshes after compilation

I have a collection of upcoming events retrieved through a JSON request to my server. These events are displayed using ng-repeat in my application. I am looking to add functionality where users can like or unlike an event by clicking on a button. <a ng ...

javascripthtmlangularjs

Delegate All Events to the Document

In my current setup, I have over 350 events that look like: $(document).on('click','.removable-init',function(){}); I've noticed a performance issue where some click events are delayed by a fraction of a second. This is happening ...

javascriptjqueryhtmlperformanceevents

`Addressing issues with table cell layout for improved horizontal scrolling`

I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel. My understanding was that position: absolute elements ...

css

The XMLHttpRequest is malfunctioning

I am currently working on accessing data from a database using AJAX. My goal is to retrieve the holiday status of a selected date from an inline calendar by capturing that date and executing a query. However, I am encountering an issue where the AJAX reque ...

jqueryajaxhttp

What is the most effective method for converting this flash application into a format that is compatible with

I have a unique flash animation that I want to make compatible with iPhones by integrating it into an iPhone app. Unfortunately, I cannot provide a direct link to the animation, but you can view a screenshot of the interface here. This interactive animat ...

iphoneioshtmlflashcanvas

XPATH: Varying inputs for several elements sharing the same xpath, determined by the parent element's value

I am dealing with a somewhat intricate issue involving xpath in Python. Here is the structure of my HTML: <label name=A> <span name=B> "Your Salary" <div name=C> <div name=D> <input name=E> <lab ...

pythonhtmlseleniumweb-scrapingxpath

Exploring the Use of data- Attributes in SVG Circle Elements

Looking for a way to dynamically update the color of a Circle element in your SVG when it is clicked? You can achieve this by using jQuery's .css() method in conjunction with the data-* attribute. CHECK OUT AN EXAMPLE: STYLING IN CSS svg { height ...

javascriptjquery

Distance between two lines within a table cell is larger than expected after inserting an image - XHTML/CSS

I have a table created in XTMl, and within one of the cells I have two lines of text: Firstname Surname I want to add an image to the right of these lines. However, when I try to insert the image using <img>, there ends up being a gap between the t ...

htmlcssxhtml

Looping through a JSON array and encoding it using the `

I am looking to retrieve data from the database using AJAX and populate a 'select' tag with that data. Each name should be displayed in its own 'option'. Here is the code snippet: Index.php: <label>Select:</label> <sel ...

javascriptphpjqueryajaxdatabase

Is there a way to ensure a grid container occupies the entire page?

Having trouble getting my grid display to cover the full size of the page. I have a grid with three columns controlled by two elements but it is not taking up the entire screen as expected. How can I make the grid fullscreen? .wrapper { display: grid; ...

htmlcss

Implementing Update and Delete Features for Database Rows in Repeater

I have a repeater set up to extract and display data from a SQL Server database. Each row in the database has corresponding buttons added to it. Below is the code used to populate the repeater: SqlConnection connR; string connectionStringR = Configu ...

c#htmlcssasp.netsql-server

Ways to define the background color of a form group

I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group. ...

htmlcsstwitter-bootstrap-3

Looking to integrate Genemu FormBundle autocomplete functionality with querybuilder functionality?

Can I modify this code to work with Genemy FormByndle in order to enable autocomplete in my form: $builder->add('users', 'entity', array( 'class' => 'AcmeHelloBundle:User', 'query_builder' =& ...

jquerysymfony

How can I pass information through a jQuery Trigger event to a Change event handler?

Is there a way to send data to the change event using jQuery's trigger method? The problem arises when a click event triggers the upload menu. Once an image is selected, the change event is activated. However, the data passed in the trigger event&apo ...

javascriptjquery

What is causing the button on the update div to not respond when clicked after receiving a Jquery ajax response?

As a newcomer to Jquery, I am facing a challenge where I want the user to be able to select an item and have a table displayed with editable information. I expect this table to automatically update once the user clicks on the "modifier" button. The tables ...

phpjqueryajax

Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels. Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half? Also, ...

htmlcssbootstrap-5

Optimize your website by caching static pages and content using Node.js

When it comes to caching static content using nodejs, there seem to be two main methods that can be utilized: The first method involves using nodejs and utilizing the following code: app.use(express.static(path.join(__dirname, 'public'), { max ...

javascripthtmlnode.js

Incorporate JQuery into a basic PHP calendar

I'm trying to implement a feature where the calendar loads without having to refresh the page. However, all I see is a blank page. Any ideas on what might be causing this issue? External file: Calendar.php <?php $year = (isset($_POST['year& ...

phpjquerycalendar

JSON structure in a loop

I'm facing an issue with looping through my JSON data. Although I am only looping through "id_first", after printing 1 and 2 correctly, it then moves on to "id_second" and prints undefined. How can I make sure that my loop only prints id first? Here ...

jqueryjsonajaxloops

Conceal the image within the second and third div elements using jQuery

I am facing an issue with my div structure <div class="block_content"> <img src="image1.png"> </div> <div class="block_content"> <img src="image2.png"> </div> <div class="block_content"> <img src="i ...

jqueryhtmlcss