Search code examples
csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Bootstrap 4.0 - Use flex columns

Hi can you help me to set columns in my code? I have this code:

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">side menu</div>
        <div class="???">
            <div>1 piece</div>
            <div>2 pieces piece</div>
            <div>1 piece</div>
        <div/>
    <div/>
<div/>

here is my actual result, where I've draw how I need split rest of space. Blue column with menu should have fixed with, what actually do. Columns in ratio 1:2:1 could be adjustable.

enter image description here

Solution

  • Instead of row you can use d-flex as a row can wrap - the content can drop below the sidebar.

    And for the content, you can use this if you have to preserve the html structure:

    <div class="d-flex w-100">
  <div class="col-3">1 piece</div>
  <div class="col-6">2 pieces piece</div>
  <div class="col-3">1 piece</div>
</div>

    See demo below - added borders for illustration:

    html,body {
  height: 100%;
}
div {
  border: 1px solid;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="d-flex h-100">
    <div class="flex-column h-100">side menu</div>
    <div class="d-flex w-100">
      <div class="col-3">1 piece</div>
      <div class="col-6">2 pieces piece</div>
      <div class="col-3">1 piece</div>
    </div>
  </div>
</div>