How I made my WordPress columns automatically resize with the help of Bootstrap

Currently, my Wordpress template utilizes Bootstrap 2.3.1 with two areas set up using SPAN4 and SPAN8. The resolution is fixed at 1170px, so there's no need to configure the lg component of Bootstrap.

I'm looking for assistance in properly configuring nested columns within the red-highlighted areas. These columns are already defined as Span 8, forming an 8-wide grid that needs to display 3 columns on medium devices, 2 columns on small devices, and 1 column on extra small devices.

While I have a basic understanding of coding, I am relatively new to CSS and struggling with this task. Here is a visual representation of what I am trying to achieve: My desired Wordpress layout

Unfortunately, I'm having trouble getting Bootstrap to work effectively with the specific sizes I want to display.

htmlcsswordpresstwitter-bootstrap

Answer №1

If you're looking to streamline your web development process, I highly recommend utilizing Bootstrap version 3.

Unlike its predecessor, version 2, Bootstrap 3 offers a wide array of classes such as col-lg-*, col-md-*, col-sm-*, and col-xs-* that can significantly simplify your tasks.

I'm here to assist you in comprehending your issue better.

https://i.sstatic.net/1dQgv.png

Feel free to test the demo code below to determine if it aligns with your desired layout:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b283528352c">[email protected]</a>/dist/css/bootstrap.css">
<style>
  .b {
    border: 1px solid #333;
  }
</style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-xs-4">aside</div>
    <div class="col-xs-8">
      main
      <div class="row">
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

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

Tips for adjusting the default container width in MaterializeCSS

The default width of container in MaterializeCSS is initially set to 70%: While the container class is not an integral part of the grid system, it plays a crucial role in organizing content by allowing you to centrally align your page's content. Th ...

cssgridviewmaterialize

Organize table information using rowspan functionality

View of Current Table I am looking to implement a side column in my table using rowspan to group dates within each pay period. The goal is for a supervisor to be able to create a new pay period, which will assign a unique integer in the database and then ...

javascriptphphtmlsql

Retrieve the information from a website and display it on the current webpage using an ajax request

Is there a way to insert parsed HTML content into my webpage using just a link from another page? I'm attempting to use an AJAX call, but I keep receiving an error. Below is the code I've written, and the browser doesn't seem to be the issue ...

javascriptjqueryhtmlajax

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

javascripthtmlangularjs

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

jqueryhtmlcssresponsive-designhamburger-menu

The ::before pseudo element is malfunctioning when used in the makeStyles function

I am currently utilizing the makeStyles function in React, but I seem to be facing an issue where the content within the ::before pseudo-element is not displaying. Strangely enough, when the content is an image it works fine, but text does not render. Jus ...

javascriptcssreactjsmaterial-uimakestyles

Encountering a problem with Selenium when dealing with tabular data displayed in a DIV format on a website, where each row is encapsulated within its own DIV element

While creating Selenium automation tests for a website with multiple rows contained within a main DIV element, each row represented by a separate DIV. For example, if there are 5 dynamically generated rows, the HTML code structure would look like this: < ...

javascriptjavahtmlcssselenium

Mastering the art of extracting elements from an HTML Dygraph

Attempting to extract all data points from this particular website utilizing BeautifulSoup and requests in Python. The current code in progress is as follows: session = requests.Session() page = session.get(https://bitinfocharts.com/comparison/bitcoin-tra ...

pythonhtmlbeautifulsouppython-requestsdygraphs

JS animation triumphant

I have developed an app that utilizes a checkbox to control the appearance of an overlay on a screen. To ensure smooth transitions, I have incorporated animations into the process. #overlay{ position:absolute; height: 100vh; width: 100vw; ...

javascriptcssanimation

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

javascriptjqueryhtmlcsspagination

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

csssvg

Retrieving the headers from an ajax request

Is there a method to retrieve the complete request headers used in an AJAX call made through jQuery? ...

javascriptjqueryhtmlajaxhttp-headers

Implementing functionality: Removing a row and applying a CSS class upon button click

Check out the fiddle below: https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/ I need help with creating a remove function and adding a CSS class to a clicked row. 1. When I click on "remove", the clicked row should be deleted. When I click on a row, ...

javascriptjqueryhtmlcss

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

javascriptcssamchartsamcharts4

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

Discrepancy found in C# Webbrowser control: the displayed content does not match the Document.inner

Currently, I am facing an issue with my website that is being loaded into the webbrowser control of my form. Despite loading the document successfully, when I try to retrieve the webbrowser.documenttext, I cannot seem to find a specific table that should b ...

c#htmlwindowsforms

Problem with layout design (utilizing float properties)

I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph? Check out this JS Fiddle link for referenc ...

htmlcss

Saving similar and dissimilar information in a database

I have been working on implementing a Like and Unlike feature for users to interact with products. Following this tutorial at , I've completed the necessary steps. However, I'm facing an issue where the likes are not being stored in the database ...

javascriptphpjqueryhtmlajax

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

htmlcssreactjsanimationcss-animations

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Why is it difficult to obtain the width of hidden elements? Here is my code: .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ul class="navbar-items"> <li> ...

javascriptjquerycsseachouterwidth