Using flex in Bootstrap 4 allows you to align content at the start and end of the container

I'm experiencing an issue with my mobile header code:

<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>

Although I have given the divs flex display and used justify-content start and end, the elements are not aligned as expected. They all appear on the left side in a column.

I also attempted to: - Apply d-flex and justify-content between to the .header_mobile_box div, but encountered the same alignment problem.

Any insights on what might be causing this issue?

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

When arranging your layout, remember to use justify-content- on your row in order to properly align your columns. It is best practice to place your columns directly after the row element and avoid unnecessary divs (

<div class="header_mobile_box">
) in between. However, if you require additional styling elements, they can be placed before the row as needed. For more guidance on horizontal alignment, consult 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

The results of the query are not showing up on the website

I am encountering an issue with a query/output that is not functioning as expected. Despite ensuring the accuracy of all column table names, no errors are being thrown by PHP error checking. Below is the code segment that is failing to produce any output: ...

phphtmlmysqlsql

Encountering difficulties invoking a REST web service using HTML/JavaScript with parameter

I am just starting out with web services and learning about HTML/Javascript. Recently, I created a RESTful web service in Java that takes a username from an HTML form and returns it back to the same page using the alert() function. Below is the code for m ...

javajavascripthtmlrestget

Chosen Buttons for Emailing

I have recently created a multistep form and have implemented functionality to receive the form contents via PHP email. However, I am facing a challenge where, when I navigate through the form and encounter multiple buttons to choose from, the email I rece ...

phphtmlcss

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss

Steps for Disabling Autocomplete in a JSP Page

How can I prevent the browser from remembering the username and password on my JSP page after submitting the form? I've already tried using autocomplete=off in the JSP code. <form name="indexFrm" id="indexFrm" autocomplete="off" method="post"> ...

javascripthtmljspauditing

Resizing input fields with Bootstrap 4

Is there a way to make form elements stretch to the whole row width in Bootstrap 4? The current arrangement looks quite messy: http://prntscr.com/id6pfm Here is the HTML: <div class="jumbotron vertical-center"> <div class="container-flu ...

htmlcsstwitter-bootstrapbootstrap-4

Incorporating text box input into a data table

When I click the "add game" button, I want the value of the input named "game-name" to appear in the "Name of the game" column of a table. Additionally, I am experiencing issues with the delete button functionality. Below is the code snippet I am working ...

javascriptjqueryhtml

The CSS property `touchmove pointer-events: none` appears to have a malfunction on Chrome for Android version 4.4 / ChromeView

For my project, I am utilizing CSS pointer-events to allow touchmove events to pass through a transparent div. This method has been effective on most platforms except for Chrome on Android. I am curious if this is a known issue with Chrome and if there are ...

csshtmlcordovagoogle-chrome

Is it possible to link an HTML select element to a changing array in JavaScript?

Let's say I have an empty HTML select element. <select id="options"> </select> Can I link a JavaScript array to this select so that when the array is modified, the select options update accordingly? Alternatively, do I need to resort to ...

javascriptjqueryhtml

Adding and Removing Attributes from Elements in AngularJS: A Step-by-Step Guide

<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...

javascripthtmlangularjs

Glitch in the animation of the slideshow

I'm encountering a small bug in the animation of my slideshow on the webpage and I can't seem to locate it. I followed a tutorial for the slideshow from this link: https://www.youtube.com/watch?v=TzAshjkhFQw. However, I only want to display 3 sli ...

htmlcsscss-animationsslideshow

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

javascripthtmlcssnode.jspdf

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

htmlcss

Creating a user-friendly login feature within the navigation bar of an HTML webpage

As someone who is new to CSS, I am currently working on a welcome page that includes a login section in the navbar. While I have successfully created div sections for the entire page, I am seeking assistance with coding the navbar using CSS. The current C ...

htmlcss

Can anyone help me identify the cause of this CSS issue?

XUL box for div element contained an inline br child, forcing all its children to be wrapped in a block. It's not a critical error, but seeing it in the firebug console is quite annoying. Is there a way to prevent or ignore these errors? The issue s ...

htmlcssfirefox

Utilize ngModel in conjunction with the contenteditable attribute

I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...

javascriptcsshtmlangularjs

Conditional Column Rendering in BootstrapVue's b-table

Is there a way to display a specific column only if the user accessing the page is an admin? I am using bootstrapVue but unsure of how to achieve this. Any suggestions or recommendations on how to proceed? ...

twitter-bootstrapvue.jsbootstrap-vue