Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle.

<div class="row">
  <div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
  </div>

  <div class="col-md-3" style="height: 50px; background-color: green">    
  </div>

  <div class="col-md-3" style="height: 50px; background-color: orange">      
  </div>
</div>

Checkout the fiddle for reference: https://jsfiddle.net/DTcHh/25558/

The issue lies with the col-md-offset-2 as it leaves col-1 on the other end. If only there was a col-md-offset-1.5, but unfortunately that is not an option :(

I attempted using paddings and margins, however, things started getting messy and seemed like I was heading in the wrong direction.

What is the correct way to center the 3 divs without resorting to any makeshift solutions?

htmlcsstwitter-bootstrap

Answer №1

After removing the offset class from the initial inner div, I decided to give that specific .row container a new class (in this case, .x). Additionally, I included the following CSS for this particular class:

.x {
  width: 100%;
  margin: 0 12.5%;
}

You can view the full code on Codepen: http://codepen.io/anon/pen/bwRZyJ

Answer №2

Consider eliminating the offset and changing 3 to 4.

<div class="row">
  <div class="col-xs-4" style="height: 50px; background-color: red">

  </div>
   <div class="col-xs-4" style="height: 50px; background-color: green">

  </div>
   <div class="col-xs-4" style="height: 50px; background-color: orange">

  </div>
</div>

This arrangement places 3 divs in a row, each taking up 33% of the screen.

UPDATE:

    <div class="container">
      <div class="row col-xs-10 col-xs-offset-1">
        <div class="col-xs-3" style="height: 50px; background-color: red">

        </div>
         <div class="col-xs-3" style="height: 50px; background-color: green">

        </div>
        <div class="col-xs-3" style="height: 50px; background-color: orange">

        </div>
      </div><!--row-->
    </div><!--container-->

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

Steps to modify the border width upon gaining focus

I am struggling to adjust the border width when my input box is focused. Currently, it has a 1px solid border which changes to a 2px different color solid border upon focus. However, this change in border width is causing the containing div to shift by 1px ...

javascripthtmlcssinputborder

Displaying outcomes within 2 nested loops

Currently in the process of developing a fast-food website, I have completed most of it except for implementing the menu display feature which will vary for each signed-up takeaway. My approach involves organizing items into categories so that takeaways ca ...

phphtml

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

htmlbootstrap-4

Arranging checkboxes in harmony with accompanying text using HTML and CSS

Here is the layout I have created using react JS. Below is the code snippet used to generate each checkbox: const CheckBoxItem = ({ Label, item, paramField, change }) => { return ( <div className="Search-Input-CheckBox-Item" ...

htmlcssreactjs

Make sure to fully load the HTML page before running the PHP code

Here is the code snippet I am currently working on: <div class="text-center"> <img src="img/ford_lodding.gif" alt="Loading GIF" style="width: auto; height: 500px;"> </div> <?php require 'php/loading.php';?> The cont ...

phpjqueryhtml

Clicking to remove dotted borders

One common CSS solution to eliminate the dotted borders that appear when hyperlinks are clicked is as follows: a:active, a:focus, input { outline: 0; outline-style:none; outline-width:0; } Although this method effectively removes the unwanted ...

htmlcss

Having trouble with the float not working for the main content below the sidebar? Stay tuned

Here is the layout I am working with: .page-wrapper { height: 100%; min-height: 970px; position: relative; } .pageheader { min-height: 50px; position: fixed; min-width: 100%; } .navbar-fixed-top { top: 0; } .page-sidebar { float: left ...

htmlcssstylesfrontend

What is the best way to ensure consistent Box Overlay Height across multiple boxes?

Is there a way to ensure that overlay box height remains the same even if the text lines are not the same length? Below is a snippet of my code. If you have a solution using jQuery or JS, please provide it. Thank you for your time and effort in trying to h ...

jqueryhtmlcss

Steps for accessing CSS variables within a scoped style block in Vue with Buefy_integration

After diving into the Buefy documentation, I successfully personalized my color scheme and even crafted unique hues by applying the is-[colorName] as a class to HTML elements. <style lang="scss"> // Importing Bulma's core @import "~bulm ...

cssvue.jsvuejs2vue-componentbuefy

Editing an XML file on the browser and saving it in its original location on the local file system

Seeking assistance with editing an XML file directly from the browser on a local file system and saving it back to its original location. I have conducted extensive research using Google, but have not been able to find a suitable solution. Any help or gu ...

javascripthtmljquery

Adjusting the sound levels of an HTML audio element using JavaScript

I'm looking to adjust the volume of an <audio> element when a user clicks on an image. HTML: <div id="cloud"> <img name="jsVolumeButton" src="images/cloud.png" width = "140px"/> </div> <audio id="player" src="sounds/rain. ...

javascripthtmlaudio

Tips for utilizing the setInterval function in javascript to update the background color of the body

Currently, I am tackling a project for my course and I am seeking to modify the body's background color on my website randomly by leveraging the setInterval technique in my JavaScript file. Any suggestions on how to achieve this task? ...

javascripthtml

bespoke HTML elements and properties

I'm currently facing some difficulties and I am unsure of how challenging it can be. I have tried following various tutorials, including those on SO and YouTube, but they all provide different approaches leaving me stuck. My goal is to create a custo ...

javascripthtml

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

javascriptjqueryhtmlcss

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

htmlcssformscss-tables

Issue with sticky navbar in parallax design

I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position. However, on one specific page, I am ...

javascripthtmlcss

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

htmlcssangularbootstrap-4

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

Option in the dropdown menu will not appear on the user interface if the data contains the "&" sign

Below is an example dataset I'm using for my dropdown selection: [ { "value":"example1", "name":"example name 1" }, { "value":"example2", "name":"example & name 2" ...

htmlangularjsuser-interfacehtml-select

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

css