How to properly align list items using Bootstrap 4?

Trying to align content within two divs side by side in a container. The goal is to have the first div or ul content on the left and the second on the right.

Attempted using text-left and text-right classes but no luck.

<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <ul class="header_links_ul">
                    <li class="float-left"><a href="#">Shopping Information</a></li>
                    <li class="float-left"><a href="#">Shipping</a></li>
                    <li class="float-left"><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="header_links_ul">
                    <li class="float-left"><a href="#">Registration</a></li>
                    <li class="float-left"><a href="#">Login</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px;  display:block;}

No errors encountered. Refer to the image attached for desired outcome.

https://i.sstatic.net/O3XPt.png

htmlcssbootstrap-4

Answer №1

To align the second group of items on the right in a two-column layout, add the class float-right to each item within the col-md-6 container.

<div class="col-md-6">
    <ul class="header_links_ul">
     <li class="float-right"><a href="#">Register</a></li>
     <li class="float-right"><a href="#">Login</a></li>
   </ul>
</div>

Link to Example

Answer №2

Apply flex display to your .header_links_ul div with the following instructions:

Add class justify-content-start to align items to the left.

Add class justify-content-end to align items to the right.

.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
 li { list-style-type:none }
 li a{ color:#000; font-size:12px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-12">
                <ul class=" d-flex justify-content-center justify-content-md-start">
                    <li><a href="#">Vásárlási információk</a></li>
                    <li><a href="#">Szállítás</a></li>
                    <li><a href="#">Kapcsolat</a></li>
                </ul>
            </div>
            <div class="col-md-6 col-12">
                <ul class= "d-flex justify-content-center justify-content-md-end">
                    <li><a href="#">Regisztráció</a></li>
                    <li><a href="#">Bejelentkezés</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Answer №3

To enhance the appearance of Regisztráció, include the style property left:0 !important within the CSS class float-left.

Answer №4

* {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 5px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12 text-md-left text-sm-center text-center">
                <ul class="header_links_ul">
                    <li><a href="#">Vásárlási információk</a></li>
                    <li><a href="#">Szállítás</a></li>
                    <li><a href="#">Kapcsolat</a></li>
                </ul>
            </div>
            <div class="col-md-6 col-sm-12 text-md-right text-sm-center text-center">
                <ul class="header_links_ul">
                    <li><a href="#">Regisztráció</a></li>
                    <li><a href="#">Bejelentkezés</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
</body>
</html>

text-align is a more efficient way to handle alignment. It allows for easy adjustments on different views. I have set the alignment to centered on small and extra small devices, feel free to test it out! Hopefully, this will be helpful

Answer №5

check out this simple code snippet

HTML Code

<div class="header_full_width"> 
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                <ul class="header_links_ul">
                    <li class=""><a href="#">Shopping Information</a></li>
                    <li class=""><a href="#">Delivery</a></li>
                    <li class=""><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                <ul class="header_links_ul">
                    <li class=""><a href="#">Registration</a></li>
                    <li class=""><a href="#">Login</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS Styles

.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px;  display:block;}

Answer №6

Utilizing flexbox

.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px;  display:block;} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <ul class="header_links_ul d-flex flex-column flex-sm-row justify-content-start">
                    <li><a href="#">Shopping Information</a></li>
                    <li><a href="#">Shipping</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-6">
                <ul class="header_links_ul d-flex flex-column flex-sm-row justify-content-end">
                    <li><a href="#">Registration</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

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

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

Is there a way to arrange list items to resemble a stack?

Typically, when floating HTML elements they flow from left to right and wrap to the next line if the container width is exceeded. I'm wondering if there's a way to make them float at the bottom instead. This means the elements would stack upward ...

javascripthtmlcss

Having issues with the Jquery Qrcode Function not functioning properly when placed inside a timeout

I'm feeling a bit lost while trying to implement Jquery QRCODE. I want to create a modal using Bootstrap 4 that displays a QR code image. When I use the code like this, the QR code image shows up: <script> $('#qrcode').qrcode('12 ...

jquerybootstrap-4modal-dialogqr-codelaravel-blade

Deleting text after an answer has been given using jQuery or JavaScript

I seem to have encountered a problem with the logic I've implemented. The desired functionality is for the user to enter an answer to the question presented. Upon submitting the answer, the current text (first question) should disappear and the next q ...

javascriptjqueryhtmldom

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

Incorporate a FontAwesome Icon into your jsPdf Document

I recently updated to the latest version of jspdf.debug.js. Unfortunately, when I try to render FontAwesome icons in a PDF document, they are not displaying properly. I have added a user icon using FontAwesome on my webpage and included an image for refer ...

javascripthtmlpdffont-awesomejspdf

A guide to implementing Stateful Bootstrap 4 Tab Navigation in Rails 6

I am currently facing an issue with my Rails 6 app that uses Bootstrap 4's tab component. The tabs work smoothly, but it creates a poor user experience when the tab resets to default after refreshing or navigating forwards and backwards. I specificall ...

ruby-on-railstwitter-bootstrapbootstrap-4tabsruby-on-rails-6

Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...

javascripthtmlcssbootstrap-4

What are the steps to effectively cultivate an isometric rectangular box using HTML and CSS?

Starting at the top in isometric grids, like this, can be quite convenient: https://i.sstatic.net/YFh0SRmx.jpg The code below is used to create a "3d" isometric box: body { display: flex; justify-content: center; align-items: center; } .plane { ...

htmlcssmatrixcss-transformsisometric

Accordion with Bootstrap 4 dropdown menu

I have implemented Bootstrap 4 accordion panels that contain tables and inputs with dropdown menus. However, the issue is that the dropdown menu does not display on top (over the other accordion) but appears within the accordion itself. Is there a solutio ...

drop-down-menubootstrap-4dropdown

Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4 <div class="container"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Is there a way to obtain the function associated with an onclick attribute?

I have a function attached to the onclick event in the HTML, as shown below: <script> function f1(){ alert('hello world'); }; </script> <a onclick="f1()">test</a> I want to manipulate that function by binding it to ...

javascriptjqueryhtml

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

javascriptjquerycssfonts

The browser is displaying the scene, but the Three.js Geometry is not visible

After following a tutorial and successfully getting the entire scene to work within the body tag, I decided to move it inside a div. However, now only the scene itself is rendered. Despite not receiving any errors and ensuring everything is accessible thro ...

javascripthtmlcssthree.js

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Encountering a issue while converting a csv document to html with c#

My current challenge involves converting a CSV file to HTML using stream reader and writer. The issue I am facing is that the last line of the CSV file is missing in the output. I have attempted debugging and tracing the stream reader, but I cannot see i ...

c#.nethtmlcsv

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update

Our team decided to utilize the tool at for assessing the speed of our website. This tool has been effective in analyzing our site's URLs for some time now. However, recently we have encountered an issue where we receive the following error message: ...

htmlpagespeedlighthouse

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

javascriptjqueryhtmlcss

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

javascriptjqueryhtml

How can I apply CSS properties to a div class by targeting another child div class?

When the div class dhx_list_item dhx_list_day_events_item is present, I need to apply the following CSS: .dhx_view .day_events .dhx_scroll_cont:first-of-type:before { //some code here } Please see the attachment for reference. ...

htmlcss