CODEWITHSUNDEEP
flexboxbootstrap-4
Toskan
Toskan

Reputation: 14951

flex-column of bootstrap fills out full width, how to not stretch to full width?

see here:

https://getbootstrap.com/docs/4.0/utilities/flex/#direction

items stretch to full width, but that is not really my desired outcome.

I want the items to keep their original size

what is the proper way of doing that?

Upvotes: 0

Views: 6915

Answers (1)

mahan
mahan

Reputation: 14985

Wrap the flex-column element with a col-auto element so that it takes as much space as it needs. 

.bd-highlight {
  background: #eee;
  border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-auto">
    <div class="d-flex flex-column bg-highlight mb-3">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
  </div>
</div>

You may use a container also.

Even better, use a d-flex element to wrap the flex-column element. But if you do, remove the d-flex and flex-column classes from the element itself and instead use w-auto. 

.bd-highlight {
  background: #eee;
  border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

  <div class="d-flex">
    <div class="w-auto bg-highlight mb-3">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
  </div>

Upvotes: 1

Related Questions