Utilize Twitter Bootstrap 3 to create a 9-column layout positioned in the center

Here is the current structure of my code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
    </div>
</div>

I am looking to center the 9 columns in the first row and the 4 columns in the second row. I have already successfully centered the second case using the following code:

<div class="row">
    <div class="col-md-2 col-md-offset-4"></div>
    <div class="col-md-2"></div>
</div>

Now, I need guidance on how to center the 9 columns in the first row effectively with Bootstrap.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

To center odd numbers of columns (where there are 3 in a row), you can utilize nesting and the col-*-offset-* classes. For cases where there are 2 columns in a row, simple centering can be achieved using offsets without requiring nesting. Additionally, employ the text-center class to center the content inside the columns.

<div class="container-fluid">
    <div class="row">
      <div class="col-md-11 col-md-offset-1">
        <div class="row">
          <div class="col-md-3 col-md-offset-1 text-center"></div>
          <div class="col-md-3 text-center"></div>
          <div class="col-md-3 text-center"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-4 text-center"></div>
      <div class="col-md-2 text-center"></div>
    </div>
</div>

Check out the demo here:

Answer №2

To perfectly center a 9-column layout, custom CSS with margins is necessary.

Although ZimSystem's solution is close, it is not precise as it is off by 1/288th of the screen width. For example, if the 9 columns represent 9/12th of the screen width, they are positioned at 23/144 from the left and 22/144 from the right. Additionally, instead of the 3 content columns being 3/12, they should actually be considered as 11/48.

The accurate method involves nesting a row within a row and adding 12.5% margins to the sides of the inner row.

<div class="text-center center-header">x</div>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row center-row-9">
          <div class="col-md-4 text-center">x</div>
          <div class="col-md-4 text-center">x</div>
          <div class="col-md-4 text-center">x</div>
        </div>
      </div>
    </div>
</div>

The CSS for center-row-9 would simply be margin: 0 12.5%. A comparison between ZimSystem's solution and a margin-based solution can be found here: http://codepen.io/jdkahn/pen/mEoaoY

Answer №3

Works like a charm for me. I decided to include some additional margin on the sides, but feel free to adjust or remove as needed.

.margin-left-10 {
  margin-left: 15px;
  margin-right: 0px;
}

.margin-right-10 {
  margin-left: 0px;
  margin-right: 15px;
}

.margin-0 {
  margin: 0;
}


<div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4 text-center margin-0">
            <div class="col-md-4 text-center margin-left-10 "><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
          </div>
          <div class="col-md-4 text-center margin-0">
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
          </div>
          <div class="col-md-4 text-center margin-0">
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-0"><div class="well">x</div></div>
            <div class="col-md-4 text-center margin-right-10"><div class="well">x</div></div>
          </div>
        </div>
      </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

Styling React Native components using multiple CSS arguments

Can you help me with styling in react-native using CSS like this? border-width: 5px 5px 5px 5px I attempted to use: borderWidth:{5,5,5,5} and borderWidth:'5px 5px 5px 5px' but it didn't work ...

cssreactjsreact-native

Changing tabs within a modal in Angular

My login and signup forms are displayed in a modal with two tabs at the top for switching between them, as shown in the picture. Although switching between tabs is working fine, I want users to be able to choose between login and signup directly on the ma ...

angularjstwitter-bootstrapangularjs-scopebootstrap-modalangularjs-ng-click

How to align a button vertically centered next to a matInput using Angular Material

Is there a way to vertically center a button next to matInput in Angular material? The submit button appears too low compared to the "First Name" input field, as shown in the images below: https://i.sstatic.net/PZGAg.png https://i.sstatic.net/ZuxHc.png ht ...

csssassflexboxmaterial-uiangular-material

Dynamic Bootstrap Tab menu slider with movable functionality when the limit is reached

I am facing an issue with the tabs menu on my website. The tabs menu items can vary between 2 or 3 to even 20 or more. When the number of navigation items exceeds 10, they automatically drop to the second line, which you can see here. However, I don' ...

javascriptjqueryhtmlcsstwitter-bootstrap

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

javascriptjqueryhtmlcss

Struggling to display a navigation menu on angular 1 with complex nested json structure

I have set up a navigation bar using JSON data fetched by an Angular service. Everything is working fine with my service and controller, but I am facing difficulty in displaying the nested JSON data in my view. Here is the JSON data: { "menu": [ ...

javascriptangularjsjsontwitter-bootstrap-3

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

Displaying static files in a base template using Django is a breeze

Is there a way to link base template with static files from outside the app in Django? I have been trying to figure out how to make static files used by the base template accessible to other templates that inherit from it. I have checked the Django docume ...

pythonhtmlcssdjango

Customize the User Agent Stylesheet to improve text readability and accessibility

I am trying to make a simple, standalone page with menus that populate the text box (the one with "Left 1"). The text in the box is way to small on mobile and on desktop computers. https://i.sstatic.net/PX3tB.png I am trying to make this text b ...

htmlcssinline

HTML form using AJAX technology for submitting product orders and generating invoices

I'm working on an HTML table that includes columns for product name, quantity, price, order, and total amount. The goal is for the client to be able to set the quantity they want to order and have the total column update automatically without requiri ...

javascriptphphtmlcssajax

Exploring Website Layouts Across Various Screen Resolutions

I am facing an issue with my website layout. While it looks great on a 20" screen, on an 11" screen the elements are not displaying correctly. The #logo is overlapping the #menu, and the #bubble is appearing below the #frame. I had set percentage size para ...

htmlcssresolution

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

javascripthtmlcss

Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Once again today, I came across a familiar issue with CSS layouts. I want to have 5 divs in a horizontal row, each with different widths: 1: 60px, 2: 30%, 3: 40px, 4: *, 5: 100px Back in the day, tables were the way to go for layouts, but now they are c ...

javascriptjquerycsshtml

pause in execution between iterations of a for loop

Challenge I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next strin ...

javascripthtmlcssarraysinput

I did not make any changes to the Dependencies in the Package.Json file even after installing bootstrap through npm

My first step in creating MVC.Core using Angular 4 was: Installing nodejs Creating the MVC Core Project Using CMD and changing directory to the MVC Core project Executing npm install @angular/cli --global or using npm install --save-dev @angular ...

angularjsnode.jsasp.net-mvctwitter-bootstrapnpm-install

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

javascriptjquerycss

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

I'm currently working on a GoDaddy website using a template that doesn't clearly highlight the SEND button in a Contact Us form. In order to comply with WCAG accessibility standards, active elements must have visible focus indicators. However, si ...

javascriptjquerycssinline-styleswcag2.0

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

htmlcsshtml-tablegradient

Dynamic adjustment of div size to fit the screen when resizing, based on the svg proportions

Is it possible to use CSS and HTML to automatically adjust the colored divs around the black SVG to fill in any extra width or height of the pink space when the screen size is resized? There is a pink div behind the logo that serves as an example of the sp ...

javascripthtmlcsssvg