Bootstrap Without Rows

Bootstrap without rows?

Looks like you have to use JS to reach goal.

You can use following libs:

Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue

Isotope - Flexible and reach functions one

Mansonry - Popular lib, similar to Isotope

Display 3 columns each row without using bootstrap

If this is what you expect Sample Image

Follow this to make it work:

Remove width: 30% of class .content_left
Add display: flex; flex-wrap: wrap; to block you want to show. (In this case was the div with id="block1"
Add width of 33% for each div with class post-block-out

You can try to add some margin or padding to make the gap between divs.

important: I guess this is better than use floats if you want to avoid conflicts. And, if you want to make it responsive, just use media queries and add width: 100%; to each div with class post-block-out

Bootstrap container without row vs with row has only one column with width is 100%

Example 1 vs Example 3 - Totally depends on you requirement.

For only 1 column, both example 1 and 3 makes sense.

But, you can go with example 1 just in case you'll need to place a new element in future then there's no need to add divs with row and col again. (from my experience)

As you suggested, example 2 is of no use since it actually touches the left edge of the screen and it certainly doesn't look good.

Bootstrap Rows and Columns - Do I need to use row?

Bootstrap 5 (update 2022)

Technically row isn't required in Bootstrap 5 since columns can be used standalone to set width, However, row is still needed for the flexbox grid system which is primary how columns are used.

Bootstrap 3, Bootstrap 4 (original answer)

Bootstrap Rows and Columns - Do I need to use row?

Yes, you need to use row.

Update 2018

The row>col relationship is the same in both Bootstrap 3 and 4 in that..

"only columns may be immediate children of rows"

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

100% width content inside container
separate content into rows (force cols to be on line)
nest the grid row>col and maintain alignment on outer sides

From the Bootstrap 3 Docs...

Content should be placed within columns, and only columns may be
immediate children of rows.

From the Bootstrap 4 Docs...

Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins. This way, all
the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of
rows.

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

Does bootstrap support col in row without container

No need to use container or container-fluid classes to nest rows.

Documentation: https://getbootstrap.com/docs/4.6/layout/grid/#nesting

.bd-example-row .row>.col, .bd-example-row .row>[class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.2);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bd-example-row">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Why don't columns float when there are no rows in Bootstrap?

Because row has the following flex properties. In bootstrap 4 the grid works by using flex container. Since there will be no flex-container without the row div, the children inside it will not float as desired. (Although I must mention you that there is no actual float property used in creation of bootstrap4's grid )

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Read this link on how bootstrap grid works.

bootstrap columns without rows padded more than columns with rows

You don't need to divide them up into multiple rows - just putting one single row element around them should take care of the padding issue.

There is only room for two col-sm-6 columns next to each other, so the following ones will go below in pairs of two anyway.

(Maybe a little extra top/bottom margin for the columns, or - padding for the outer row might need adding for it to look good.)

Bootstrap add space in between cols without breaking row

The reason why it breaks the rows is because you are using the Bootstrap column classes incorrectly. Those are supposed to be used as containers for your content i.e. you are not supposed to add any custom styling (of the kind you did) to your columns because that would lead exactly to the problems you have now.

To solve this, you wrap your column content in divs and then use your custom class giveButton on those divs. That gives you the freedom to apply any styling you want while still letting Bootstrap do its job when it comes to spacing and responsiveness etc.

To make your buttons span full width I added the native Bootstrap class w-100 (width:100%) to the divs and also added the Bootstrap class text-center to center things. Done!

Now, the Bootstrap gutters automatically create neat spacing but you can control it further by applying Bootstrap spacing classes to your columns. For example, px-* with a value between 0 and 5 instead of * will control the horizontal padding and py-* will control the vertical padding.

Here's the working code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>    .stripe-button-el    {        visibility: hidden !important;    }    .giveButton {        background: #3D94F6;        background-image: -webkit-linear-gradient(top, #e9e9e9, #f8f8f8);        background-image: -moz-linear-gradient(top, #e9e9e9, #f8f8f8);        background-image: -ms-linear-gradient(top, #e9e9e9, #f8f8f8);        background-image: -o-linear-gradient(top, #e9e9e9, #f8f8f8);        background-image: linear-gradient(to bottom, #e9e9e9, #f8f8f8);        -webkit-border-radius: 20px;        -moz-border-radius: 20px;        border-radius: 20px;        color: #747474;        font-family: Open Sans;        font-size: 46px;        font-weight: 100;        padding: 1px;        box-shadow: 1px 1px 7px 0px #000000;        -webkit-box-shadow: 1px 1px 2px 0px #000000;        -moz-box-shadow: 1px 1px 2px 0px #000000;        text-shadow: 3px 0px 5px #d4d4d4;        border: solid #bababa 1px;        text-decoration: none;        display: inline-block;        cursor: pointer;        text-align: center;        font-family: 'Anton', sans-serif;    }    .giveButton span{        top: -15px;        position: relative;        left: -6px;        font-size: 33px;}
    .giveButton:hover {        background: #1E62D0;        background-image: -webkit-linear-gradient(top, #0c8955, #71f68f);        background-image: -moz-linear-gradient(top, #0c8955, #71f68f);        background-image: -ms-linear-gradient(top, #0c8955, #71f68f);        background-image: -o-linear-gradient(top, #0c8955, #71f68f);        background-image: linear-gradient(to bottom, #0c8955, #71f68f);        text-decoration: none;        color: white;    }    .SelectedButton    {        background-image: -webkit-linear-gradient(top, #0c8955, #71f68f);        background-image: -moz-linear-gradient(top, #0c8955, #71f68f);        background-image: -ms-linear-gradient(top, #0c8955, #71f68f);        background-image: -o-linear-gradient(top, #0c8955, #71f68f);        background-image: linear-gradient(to bottom, #0c8955, #71f68f);        text-shadow: 3px 0px 5px #7c7c7c;        color: white;     }</style>
<div class="container">
    <div class="row">        <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>25</div></div>        <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>50</div></div>          <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>100</div></div>    </div>
    <div class="row">        <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>250</div></div>          <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>500</div></div>          <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>1,000</div></div>    </div>
    <div class="row">        <div class="col-12 text-center">        <div class="giveButton w-100"><span>$</span>5,000</div>        </div>          <div class="col-12 text-center">        <div class="giveButton w-100"><span>$</span>10,000</div>        </div>      </div>
</div>

Bootstrap Without Rows