Why Is My Bootstrap Column Centered Instead of Left-Aligned

Why is my Bootstrap column centered instead of left-aligned?

You are facing floating issue as you are not wraping your element inside .row as you can see in this question : Floated elements of variable height push siblings down

So here is what you are having if you don't use container/row provided with bootstrap :

div {  border: 1px solid;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-4">  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div><div class="col-xs-8">  lorem ipsum lorem ipsum lore</div><div class="col-xs-4">  lorem ipsum lorem ipsum lorem ipsu</div><div class="col-xs-8">  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>

Bootstrap - Centering Content, Then Left Aligning (in relation to center)

Another solution is to set some CSS-properties to your "Test Test" div:
In this case add this div-centered class to that div.

A working example :)

.div-centered {  text-align: left;   margin: auto;   width: 200px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<h1>Example 2</h1>You rock div-centered class!<div class="row text-center">  <div class="col-sm-1">  </div>
<div class="col-sm-3">    <div><img src="http://via.placeholder.com/200x100"></div>    <div class="div-centered" >Test Test</div> </div>  <div class="col-sm-3">      <div><img src="http://via.placeholder.com/200x100"></div>      <div class="div-centered">Test Test</div>    </div>  </div>

Right alignment first column and left align second column in div of Bootstrap

I hope this is what you're looking for:

Sample Image

Source:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>

    <div class="container">
        <div class="row">
          <div class="col-md text-right">
           <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
           <h1>Hello World</h1>
           <p>Bootstrap grid</p>
          </div>
          <div class="col-md">
            <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
            <h1>Hello World</h1>
            <p>Bootstrap grid</p>
          </div>
          
        </div>
      </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

What do I need to do to get these bootstrap columns to align left?

You can left align the container as described in this question, or simply use a full-width container-fluid, and then only use a portion of the 12 Bootstrap columns, for example 8 columns..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

http://www.bootply.com/SRnhM22tPr

On smaller screens you'd probably want the layout to be full-width instead of left aligned.

Bootstrap 4 row does not align to middle

found a css trick that works

.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

Bootstrap 3 - columns won't center align

As others have pointed out, change col-md-3 to col-md-4

I do not want the columns to span the entire row. I think that will make the images look too big for the space.

the solution I know of for Bootstrap 3 is to add a max-width to a container so it doesn't stretch the full screen/element (without removing the 100% from the images as that would no longer make them resize/responsive).

You may also want to use col-sm-4 or col-sm-6 so they don't end up too big when the screen is smaller:

https://codepen.io/StudioKonKon/pen/yQQrdM

.mycontent{   max-width: 800px; /* or something else */}

<!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container mycontent"> <div class="row justify-content-md-center">
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
 </div><!-- end row --></div><!-- end container -->

Bootstrap 5, columns not aligned

Because you are clearly using tabular information/data, you should use tables

You should not use table-based layout under any circumstances.
Instead, check out our CSS Tutorials to start learning about modern
web site layout. However, that doesn’t mean you should avoid tables —
tables should be used whenever you need to present information in a
tabular format.

In this case you can use bootstrap 5 tables

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Ammaloramento</th>
      <th scope="col">Gravità</th>
      <th scope="col">Estensione</th>
      <th scope="col">Dettaglio</th>
      <th scope="col">Segnalazioni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ossidazione</td>
      <td>Lieve</td>
      <td>75 %</td>
      <td> In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</td>
      <td> Presenti: 0</td>
    </tr>
  </tbody>
</table>

Bootstrap 4 Center list in col and left align text in list

I found a way to do it using Bootstrap 4 flex utility classes as follows:

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3 d-flex justify-content-center">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

Here is the codeply

Why Is My Bootstrap Column Centered Instead of Left-Aligned