Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code:

.center{
    width: 90%;
    margin: 0 auto;
}

However, this code is not producing the desired effect.

My goal is to arrange the desktop view as follows:

item    item    item
    item    item

For the tablet view, I want the layout to be like this:

item    item
item    item
    item

Unfortunately, all the items are currently shifting to the left instead of maintaining the desired layout.

If you would like to see the website in action, please visit here.

Answer №1

To start, make sure your row is contained within a .container

Next, you can center your text and image within the columns by using offsets like this:

Here's how I typically set it up:

.row
   .col-md-4.text-center    //.text-center  is to center your text and image within the column
   .col-md-4.text-center
   .col-md-4.text-center

.row
   .col-md-4.col-md-offset-2.text-center
   .col-md-4.text-center

Answer №2

To begin, include the following CSS in your stylesheet:

.center{text-align: center;} 

Next, modify your last column in the HTML code to look like this:

<div class="col-md-4 col-sm-12 col-xs-12">

Keep in mind that you want Bootstrap to make that last column full width on tablets. Since tablet size is denoted by sm-, be sure to include sm-12 for any tablet-sized screen or smaller.

Answer №3

One of the great features of bootstrap is its built-in utility functions.

<div class="centered">

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

What are the steps to developing a responsive tile using HTML and CSS?

I am exploring the functionalities of CSS and responsive design. To better understand how it works, I created a simple example which can be accessed here. This demonstration showcases a basic tile template. My goal is to display my tiles in 2, 3, 4, or m ...

When a button is clicked, load two separate pages into two distinct divs at the same time

$('#menuhome').click(function(){ $('#leftcolumncontainer').load('pages/homemenu.php'); }); the code above is used to load the home menu on the left side. Now, let's add the following: $('#menu ...

The ajax call cannot be processed because the request method 'POST' is not supported

I am currently encountering an issue with making an ajax call to my spring controller for creating some data in the database. The code for the ajax call looks like this: function sendDataToController(param1, param2, index1, index2, dataType) { $.ajax( ...

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

What is causing Bxslider to malfunction?

I need help troubleshooting an issue with my HTML code. The slideshow I'm trying to create isn't working as expected; all images are displaying vertically and I'm getting an error message saying that bxslider() is not a function. Can anyone ...

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

How can Typescript elevate your use of the IFrame API?

Here is a code snippet that performs the following actions: let doc = this.iframe.contentDocument || this.iframe.contentWindow; let content = `...` doc!.open(); doc!.write(content); doc!.close(); Despite this, the Typescript linter thr ...

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

<ion-col col-9 class="sildes"> <ion-slides slidesPerView="{{nbPerPage}}" spaceBetween="5"> <ion-slide *ngFor="let slide of lesClassrooms; let i = index" (click)="saveCurrentSlide(i)"> ...

What could be causing the issue of updated element values not getting transferred?

Currently, I am checking for changes in input fields like textareas, checkboxes, and select options. When a change is detected, my function is supposed to search the database and update the 'results' div. Here is what I have so far. The function ...

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Attempting to transfer data to a MySQL database using Angular on the client-side and Express JS on the server-side. The post function on the server side works when tested with Postman. Here is the code snippet: app.use(bodyParser.json()); app.use(bodyPa ...

Updating an added row with jeditable and the on() method in jQuery version 1.7 triggered by a button click

I am facing an issue with my data table. I have the ability to add rows from a button at the top of the table and select rows as well. However, I want to be able to edit those selected rows, even if they are newly added. Currently, I am able to use a code ...

Bring google map markers to life with animation

Is there a way to create an animation like the one shown in this example? I'd like for the map to highlight the corresponding place when a user clicks or hovers over a location in the list. How can I make this happen? I've tried searching on Go ...

Interactive website powered by a dynamic database system and featuring HTML pages

I am currently working on a project involving a cutting-edge dynamic database driven website where users can engage by posting, commenting, liking, and more. I have been contemplating the idea of using HTML pages instead of PHP pages. Essentially, wh ...

Is there a way to customize the default error message for file extensions in the jQuery validation plugin?

Is there a way to customize the error message displayed by the jQuery validation plugin? Below is the HTML form I am using: <form id="form_detail_file3" action="{$form_action}" method="POST" enctype='multipart/form-da ...

The oversized image is refusing to scale down to fit within the confines of the CSS grid container

I am currently facing a challenge with creating a responsive image within a grid layout using CSS. The image is not resizing properly when the browser window changes size and is extending beyond its container borders. I have experimented with various techn ...

Positioning and resizing elements based on varying screen sizes and levels of zoom

I recently designed a basic webpage using HTML with two main elements - a chat window for user interaction and a chart.js plot. Here is a snippet of the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

Unlocking the power of jQuery: merging two queries using data-attributes

Within my DOM, certain elements contain attributes labeled data-foo and data-bar. I am seeking a more sophisticated approach to selecting only those elements that possess both of these attributes Currently, I am relying on a filter method but I wonder if ...

Tips on retrieving and refreshing dynamically generated PHP file echo output within a div

I have a div that I'm refreshing using jQuery every 10 seconds. The content is being read from a PHP file named status.php. Here is the JavaScript and HTML for the div: <script> function autoRefresh_div() { $("#ReloadThis").load("status.php ...

How can I close the menu when a menu item is clicked in a React.js application?

I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS ...

Manipulating the information pulled from an external PHP script that is currently being displayed

Although I don't consider myself a professional, I am determined to learn some web languages this summer to be able to turn my design ideas into prototypes. Currently, I am struggling to figure out how to manipulate elements that are being echoed bac ...