Vfrdtyky

I have a basic Bootstrap 4 grid like this one:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<div class="container">

		<div class="row">

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

			<div class="col">

				some content

			</div>

		</div>

	</div>

Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).

How can I prevent this from happening?

Use flex-nowrap on the row...

<div class="container">

    <div class="row flex-nowrap">

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

        <div class="col">

            some content

        </div>

    </div>

</div>

https://www.codeply.com/go/w8H4wPL8Vj

Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.

For example,

<div class="container">

  <div class="row">

     <div class="col-xs-4">

     </div>

     <div class="col-xs-4">

     </div>

     <div class="col-xs-4">

     </div>

  </div>

</div>

You can use the bootstrap breakpoints in col by add extra few classes such as:
col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.

You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.

Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/