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

Tips to enhance web page loading speed when parsing JSON data from a URL

While extracting data from a JSON file accessed via URL, I am experiencing long loading times. Surprisingly, the website manages to display the same data only when it's ready, and I aspire to achieve a similar functionality. I have yet to discover a ...

Selecting multiple values using Ajax in a select2 dropdown menu

I am currently using Select2 and fetching data in JSON format via AJAX. View: <select class="form-control qual_id" multiple> <option value="">-Select Degree-</option> <option value="1">SSC</option> <option val ...

Achieving a transparent background color for a div without affecting the content with CSS

I am attempting to design a div element with a basic background color and some text displayed on it. I would like to lower the opacity of the background color in this div, but every time I try, the opacity of the text also changes. Is there a way to adjust ...

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...

I am encountering an issue where my codeigniter controller is unable to load my model

Below is the code for my controller: defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('User_model') ...

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

Prevent Overflow with Hidden Setting, Use Cover for Background Image, and Optimize for Anchors and

I'm currently working on a page that is designed not to scroll vertically. If you'd like to see the page with the issue I'm encountering for reference, you can visit Everything has been running smoothly except for two specific issues: W ...

Can a Dashcode Webkit Web app be transformed into traditional HTML and CSS?

I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...

The precision of the stopwatch is questionable

Just starting out with JS and jquery, I quickly put together a stopwatch code in JS that seems to work accurately up to 10 minutes. The issue arises after the 10-minute mark where it starts falling a few seconds behind (I compared it to a digital stopwatc ...

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

Tips for organizing JSON data in AngularJS are as follows:

Can someone assist me in looping this array value into 3 columns using angularjs? Currently, my view appears as an HTML table with 3 columns, but the values are displayed vertically instead of horizontally. You can see an example of how it looks here. Bel ...

What is the best way to add permissions to each role in JavaScript?

I have been attempting to dynamically add data to an HTML table using JavaScript. The data consists of roles and their corresponding permissions, which are retrieved using Laravel's ORM. I have tried utilizing a nested each jQuery function to append t ...

What is the best way to integrate AJAX with draggable columns in a Laravel application?

I have successfully integrated draggable functionality for table columns using jQuery Sortable within my Laravel application. I am now facing the challenge of updating the database with the data from these columns through AJAX. Despite researching online ...

Using Angular template to embed Animate CC Canvas Export

Looking to incorporate a small animation created in animate cc into an angular template on a canvas as shown below: <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px"> <canvas id="canv ...

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

concerns with Ajax-based pagination techniques

I've successfully implemented ajax pagination in codeigniter. However, I am facing an issue where the records are divided by 10 and the page automatically reloads when I click on the next page button. This functionality works fine on localhost but not ...

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

Ways to update the color of the mat-dialog-title using the material theme

Currently, I am utilizing the Angular Material Dialog and have been attempting to dynamically change the title color of the dialog based on the material theme. <h1 mat-dialog-title color="primary">{{ title }}</h1> Even though setting ...

Is there a way to automatically send users to a different PHP file once they click "submit"?

I need to redirect to a different php file named index2.php. The username and password values are already set as follows: Username=sid, Password=yeaoklogin. When the user clicks on the Login button, they should be redirected to a page called index2.php. ...

Chrome reports a Javascript error: indicating that it is not recognizing the function

When working with a js file and html, I encountered an issue where one function works fine but another prompts an error in Chrome: Uncaught TypeError: specification_existing is not a function I'm puzzled as to why one function works while the othe ...