CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4flexbox
Tibi458
Tibi458

Reputation: 91

Justify content start and end in bootstrap 4 with flex

I have this code, for a mobile header:

<div class="header_mobile">
    <div class="container">
        <div class="row">
            <div class="header_mobile_box">
                <div class="header_mobile_logo_div d-flex align-items-center justify-content-start">
                    <a href="<?php echo $host; ?>" title="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="header_logo_to_link navbar-brand">
                        <img src="<?php echo $host; ?>/images/assets/logo_33.png" alt="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="img-responsive header_logo_image" />
                    </a>
                </div>
                <div class="header_mobile_icons_div d-flex align-items-center justify-content-end">
                    <a href="<?php echo $host; ?>/kedvenc-termekeim" title="Kedvenc termékeim" class="header_kedvencek_link"><i class="fa fa-heart fejlec_kedvenc_ikon" aria-hidden="true"></i></a>
                    <a href="<?php echo $host; ?>/kosar" title="Kosár" class="header_kosar_link">
                        <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
                        <span id="header_kosar_text" class="header_kosar_text"></span>
                    </a>
                </div>
            </div>  
        </div>
    </div>
</div>

I gived the divs flex display and justify-content-start and end, but its not working, all the divs are at the left side, and under each other.

I also tryed: - giving the .header_mobile_box div: d-flex, and justify-content between, but still the same problem.

What am i doing wrong?

Upvotes: 2

Views: 3291

Answers (1)

Roya
Roya

Reputation: 342

You can justify-content- on your row. Place your cols right after the row, and avoid having extra divs (<div class="header_mobile_box">) in between. You can place it before the row if you need it for styling purposes. Please refer to Bootstrap's Horizontal Alignment.

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="header_mobile">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-4">
          Left side
        </div>
        <div class="col-4">
          Right side
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions