Centering bootstrap columns in a WordPress template

I am facing an issue with aligning columns in a bootstrap section within a Wordpress template that I am working on. The problem is that the columns on the second line of the row are not centered.

Currently, the layout displays 4 columns in the top row and then 2 underneath floated to the left. What I aim for is to keep the 4 columns at the top as they are but center the bottom two columns.

Below is the code snippet:

<div class="col-sm-10 col-sm-offset-1">
 <div class="row row-centered">
   <div class="col-sm-3 col-centered">

   </div>
   <div class="col-sm-3 col-centered">

   </div>
   <div class="col-sm-3 col-centered">

   </div>
   <div class="col-sm-3 col-centered">

   </div>
   <div class="col-sm-3 col-centered">

   </div>
   <div class="col-sm-3 col-centered">

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

'example

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

htmlcssbootstrap-4

Answer №1

Having trouble with six static divs on your main template? Check out this solution

If that doesn't work, try combining the last 2 divs into a single row and add a class name of justify-content-center. This should give you the desired outcome.

Answer №2

If you need more information, feel free to check out https://getbootstrap.com/docs/4.0/layout/grid/ and give this a try:

<div class="col-sm-10 col-sm-offset-1">
 <div class="row">
   <div class="col-sm-3">

   </div>
   <div class="col-sm-3">

   </div>
   <div class="col-sm-3">

   </div>
   <div class="col-sm-3">

   </div>
 </div>
 <div class="row justify-content-center">
   <div class="col-sm-3">

   </div>
   <div class="col-sm-3">

   </div>
 </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

Detecting the scroll events of elements with the overflow:hidden property

Looking to synchronize scrolling between two different panels or divs? In one element, there's an overflow: auto while the other has overflow: hidden (trying to mimic a grid with frozen columns). I've managed to sync the scroll when it occurs w ...

javascriptjqueryhtmlcss

Conceal navigation buttons on the first and last pages of the slider

I'm attempting to develop a slider that hides the "previous" button when it is on the first slide and hides the "next" button when it reaches the last slide. The slider will be created using a combination of PHP, forms, and JavaScript. Below is the H ...

javascriptphpjqueryhtmlslider

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

javascripthtmlcss

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn&ap ...

javascriptjquerycsshtml

Adjust the baseline of text in <li> elements by shifting it 2 pixels upwards

My webpage menu is set up with inline "li" elements within a "ul". Each "li" has a colored border and contains an "a" tag. I'm looking to change the text color inside the "a" tag and move it 2px up when hovering over it without affecting the li border ...

htmlcssmenuhtml-lists

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

javascriptphpjqueryhtmlcss

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

PHP Table Sorting Functionality

After inputting the correct code, I am still facing an issue with the table sorting not showing up. Can someone assist me with this problem? I have included both my CSS styles and PHP coding. Thank you for your help! Here is a visual representation of the ...

phphtmlsortinghtml-table

Is the Mini Cart button in Woocommerce not aligned properly?

My website was functioning perfectly until yesterday. However, after updating some plugins, the Mini Cart dropdown button started to display in a weird and misaligned manner. https://i.sstatic.net/SsZee.jpg Prior to the plugin updates, the button had the ...

csswordpresswoocommerce

The code, which is the same, placed in a different location on another page - fails to function

On the index.php page, I have successfully implemented the following code snippet at the bottom: <script type='text/javascript'> $("#tbAlegro").click(function() { window.location = 'alegro.php'; }); </script> However, ...

jqueryhtml

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

What is the reason that the css backdrop-filter: blur() is functioning properly everywhere except on the active bootstrap-4 list-group-item?

I have a gallery with an album-card component inside, and within that is a carousel. I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why? Here is the HTML for the gallery com ...

htmlcssangularbootstrap-4sass

Struggling to display the sorted array items on the screen?

Within the realm of my jsfiddle experiment, my aim is to organize items based on price from highest to lowest by utilizing the following function: function mySortingFunction() { var elements = [].slice.call(document.getElementsByClassName("price")); e ...

javascriptjqueryhtmlsorting

Constructing markup for text and subtext in a meaningful manner

I am in the process of creating a roster of Employees and their dependents on a webpage and I could use some guidance on the best way to structure this information. Here is an example of the content on my page: <div> John Smith Employee - 03/01/198 ...

htmlcss

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

What could be causing the side margins on my navbar in mobile view in Bootstrap?

After spending some time working on a simple navbar with CSS styling, I encountered an issue when viewing it in mobile mode. The navbar did not expand to 100% of the screen width and had a margin of about 20px on both sides. CSS .navbar .brand { wi ...

htmlcsstwitter-bootstrapmarginnavbar

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

Center the form on the page using Bootstrap

My bootstrap login form is currently appearing at the top of the page, but I want it to be centered. <div class="container"> <div class="row text-center"> <div class="col-sm-6 col-sm-offset-3 well offset4"> <div class=""&g ...

cssangularjstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Discover the row and column of a selected table cell using vanilla JavaScript, no need for jQuery

In my JavaScript code, I am currently working on creating an onclick function that will display the row and column of a specifically clicked cell in a table. I have successfully implemented functionality to return the column number when the cell is click ...

javascripthtmlcss