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.

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

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

The selenium element for the submit button is currently not responsive to interactions

Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...

pythoncssseleniumautomationelement

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

javascripthtmlvue.jsvue-component

What is the best way to display uploaded images on the server side in a browser using the MEAN stack?

I am currently utilizing the MEAN stack to develop an application that allows users to upload images, preview them, and save them in a MongoDB database via a server implemented with Express. Furthermore, I aim to retrieve these images from the server and d ...

angularjshtmlmongodbexpressfilereader

What are some creative ways to incorporate a variety of images into my website?

Currently working on a webpage and running into an issue. I have a div called "background" where I am loading several images using the <img>-tag. The problem is that the images are set to float:left;, causing them to wrap onto a new line as they can& ...

javascripthtmlcss

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

javascriptjquerycsswordpress

Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...

cssember.jsember-clipostcssautoprefixer

Showing a div with a smooth fade-in effect while switching its display property to inline using jQuery

Currently, I am working on a project that involves implementing a "side pop up". To ensure it doesn't flicker like it does with jQuery's "hide()" method, I want to start by setting the display property to none using CSS. My main question is: - Ho ...

javascriptjqueryhtmlcss

Transform Default Buttons to Resemble Normal Buttons

I currently have a JavaFX button that is set as the Default Button, allowing users to select it with the Enter key. The button has a blue background: However, I would like to change its appearance to that of a normal button: After reviewing the JavaFX CS ...

cssbuttonjavafxjavafx-8

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

htmlcss

Trouble with custom font updates in Hugo using Blogdown

Recently, I've been immersing myself in Blogdown to create my own personal data blog: Using the academic theme as a base, I successfully tweaked the color scheme without any hiccups. However, despite making adjustments in my params.yaml file, none o ...

htmlmarkdownhugoblogdowntoml

Achieve uniform height for two elements using Material UI

Here is the code snippet I have: <div className="center"> <TextField variant="outlined" className="manualUserFollowTxt" required id="manualUserFollowTxt" label="Username" name="username" autoComplete="username" a ...

cssreactjsmaterial-ui

Creating a persistent hover effect

Utilizing primarily CSS, along with background images and adjacent selectors, I am creating a page that displays unique human-readable text information when the user hovers over horizontally stacked images. The textual information is presented in a div on ...

jquerycsshtmlhover

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call

Issues with html5 dropdown menu not displaying properly when hovered over

As a beginner in programming, I have been tasked with creating a website using HTML5 and CSS. The main issue I am encountering is with my horizontal menu bar that has vertical sub-menus appearing on hover. The menu consists of 3 main tabs: Home, Health, a ...

csshtml

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

When I include the following line of HTML code: <td> <img align="center" [src]="productByBarCode.imageUrl" /> </td> An error is thrown by the console: ERROR TypeError: Cannot read properties of undefined (reading &a ...

htmlangulartypescriptangular-material

Material UI button component does not have the applied class

I'm encountering an issue with applying a CSS class (redirectButton) to a Material UI button. Despite my efforts, the class is not being successfully applied. Below is the HTML code in question: {(isDataAdapterAdmin && !dataSources?.length) & ...

htmlcssreactjsmaterial-ui