Why are the elements not aligned in a single row?

Can anyone explain why these two elements are not displaying on the same row when using Bootstrap 4?

<div class="container">
   <div class="row">
      <div class="col-lg-2">
         <a class="logo"><img class="logo__img"  src="./img/logo.png"/></a>
      </div>
      <div class="col-lg-1 hamburger">
         <span></span>
         <span></span>
         <span></span>
      </div>
  </div>
</div>

View the image description here

.hamburger span {
    background: #fff;
    display: block;
    height: 2px;
    margin-bottom: 5px;
    width: 2.4rem;
}

Answer №1

Have you included the Content Delivery Network (CDN)?

Remember, without adding the CDN, Bootstrap will not function properly.

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

Using jQuery to set the background-image on the body's after pseudo-element with CSS

I am currently utilizing body:after for setting the page wallpaper. body:after { background-image: url('assets/img/wallpapers/<?php echo $getWallpaperFile; ?>'); } CSS content: ' '; display: block; position: absolute; left: ...

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

Encountering an issue with your HTML code? Require some assistance?

I am encountering a validation error stating that there are "misplaced non-space characters inside the table." Despite trying everything, I am unable to resolve this issue. The specific error can be seen in the following image: https://i.sstatic.net/wAFDh ...

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

Adjust the placement of a dropdown menu placed within a table

I have successfully implemented a sticky table header, but I am encountering an issue with the select element integrated into my table: View before scrolling the table View after scrolling the table As you can see, the select element overlaps with the t ...

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

Why Electron is refusing to open a JSON file

Currently, I am attempting to populate filenames using JSON for the onclick='shell.openItem('filename') function. While the console.log(data[i].url) correctly displays the kmz files for each button, I encounter an error when clicking a butto ...

Trigger a jQuery alert when a row containing a specific attribute is clicked

I am trying to work with an HTML table that looks like the one below: <table id='messagelist'> <tr id="rcmrowMTM" class="message selected" aria-selected="true"> <td class="threads"><span class="threads"></span&g ...

Adjustable ember count within Intercom HTML using Selenium and Python

My goal is to automate tasks at my workplace, but I am facing some challenges. Due to the lack of admin access on my work Intercom App, I have resorted to using Selenium. I need to input "Hey" into the chat box on Intercom and send the message successfull ...

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

The horizontal display list is experiencing issues when using the display inline property

I'm having trouble getting my list to display horizontally. I've tried using display: inline, as well as float: left; and position:center, but can't seem to get it centered properly. JavaScript Array.prototype.map.call(document.querySelect ...

Reposition div when clicked

I have encountered a challenge where I am unable to perform a small task. My goal is to have the position of "div1" change upon clicking on "div2", taking into account that "div2" is nested inside "div1". Additionally, when clicking on "div2" again, "div1" ...

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

Tips for deleting a duplicate identifier within an li element that possesses a particular class through javascript

I need help removing duplicate IDs from list items with a specific class. For example, in the following list, there are duplicates IDs (small, medium) and I want to remove the IDs with the class "size". How can I achieve this? <ul id="bulk"> ...

tips for understanding the contents of the upcoming css class

I am working with a CSS class that looks like this: #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{ padding-right:2.5%; padding-left:0 } Is it correct to assume that for any HTML elements using the menuAccordion class, if there is an & ...

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

Unable to determine the reason why the JavaScript plugin is not functioning as expected

I have been attempting to set up a JS modal window and have essentially copied the code for the plugin exactly as instructed, but it is not functioning properly. Here is my code... <!doctype html> <html> <head> <meta charset="utf- ...

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. https://i.sstatic.net/3oaPl.jpg <table class="table-mai ...

IE rendering issue: jQuery image slideshow captions lack transparency

I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...

Creating a weather format user interface in HTML can be accomplished by following a few

I am currently utilizing the open weather API to showcase weather data, however, I am facing difficulties in arranging the data in a format similar to the one shown below. Example output: I attempted to present the data in the following structure: ...