Troubles with Bootstrap's column functionality causing issues

Trying to create a menu using Bootstrap, but experiencing issues with the 'col' class not working correctly. Here is the sample HTML code provided:

<div class="logo col">
   <a href="index.html"><img src="Content/Logo.png" class="logo"/></a>
</div>
<div class="menu col">
   <ul>
      <li><a href="index.html" class="GradientText">Home</a></li>
      <li><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
      <li><a href="Views/Contact.html" class="GradientText">Contact</a></li>
   </ul>
</div>

The classes menu and logo are defined in a custom CSS file.

Current Bootstrap version used is 5.1.3

Observed result can be seen here: https://i.sstatic.net/PfE4l.png

htmlcssmenubootstrap-5

Answer №1

Enclose it within a row class

Bootstrap 5 utilizes flex. The row class acts as the container for columns and applies the display: flex property to ensure proper column sizing.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a76e61626433">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


<div class="row">
  <div class="logo col">
   <a href="index.html"><img src="https://via.placeholder.com/80" class="logo"/></a>
  </div>
  <div class="menu col">
     <ul >
        <li class="d-inline"><a href="index.html" class="GradientText">Home</a></li>
        <li class="d-inline"><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
        <li class="d-inline"><a href="Views/Contact.html" class="GradientText">Contact</a></li>
     </ul>
  </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

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

htmlcssbootstrap-4

What is the proper way to define a class attribute for an HTML element within a PHP file?

I am having trouble writing the class attribute in a PHP file for an HTML element. Here is my code: echo '<div><p class="'.($value->getIsRequire() == 1) ? 'required' : ''.'"> </p> <input type="tex ...

phphtmlcssmagento-1.9

The alert box is not displaying, only the text within the tags is visible

Trying to implement an alert message for logged-in users. A successful login will trigger a success message, while incorrect username or password will display an error. function showMessage(response) { if (response.statusLogged == "Success login") { ...

javascriptjqueryhtml

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy? Cli ...

htmlcssangular

Guide on emphasizing a div when the page's validity is not true

Is there a way to highlight a specific div when the page.isvalid=false? I can display the error message on page load, but struggling to highlight the required control. I have a JavaScript function that applies an error class to the div, which works fine w ...

javascriptjquerycss

What is the most effective method for tracking file upload progress using SSE?

I am currently working on creating a file upload progress feature that is compatible with older browsers using AJAX. In HTML5, there is the xhr.upload.progress event which works well for modern browsers, but I need an alternative for non-XHR2 browsers. I h ...

ajaxhtmlfile-uploadprogressserver-sent-events

Is it possible to implement an OnMouseOver function for Canvas Arc or QuadCurve?

I am trying to create a round diagram where I want to show a div when users hover over each section (arcs). Initially, I thought about using canvas like in this example: . However, I am facing difficulties drawing an arc in canvas. Should I explore other ...

htmlcanvascss

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

javascriptjqueryhtmlcss

Issue with fixed positioning not behaving as intended while scrolling downwards

I am facing an issue with an element that has the .it class and I want to keep it fixed on the screen using the position: fixed CSS property. However, as I scroll down the page, the element moves along with the screen instead of staying in place. Below is ...

htmlcss

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...

htmlcssangular6typescript2.0

What causes a new stacking context to be formed when using position: relative without z-index?

After reading this informative piece: When two elements share the same stack level, their layering is determined by their order in the source code. Elements stacked successively are placed on top of those that came before them. And referencing this ar ...

css

Showcasing a checkbox with the chosen item marked as selected

My goal is to allow users to select hobbies from a checklist provided. The chosen hobbies should then be added to the user table. I want the checkboxes to display the user's current hobbies - checked if selected, unchecked if not. Users should be able ...

pythonhtmlgoogle-app-engine

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

javascriptjqueryhtmlthymeleaf

Animating changes on a webpage using CSS transitions in conjunction with the

Can the border color of a simple line div be changed from top to bottom using GreenSock? .line { position: relative; border: 1px solid #c3ced8; width: 0; height: 50px; display: block; content: ''; z-index: 1; top: -19px; marg ...

cssgsap

Is there a way to reset my div back to its initial background color when clicked a second time?

I am currently utilizing the jQuery addClass and removeClass animate feature for my project. Basically, what is happening is that when the user clicks on a particular link, a dropdown navigation will appear. This feature is essential for ensuring responsi ...

jqueryhtmlcssaddclassremoveclass

Searching on the search bar using Django's object.filter method results in returning Object (1)

Recently, I have been working on a Django website Project that features a database filled with various books. Within the site, there is a search bar that allows users to type in the name of a book and receive results from the database. However, I have enco ...

pythonhtmldjango

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

Change "Only" regular text into clickable links without altering any current hyperlinks

Looking to transform plain links into hyperlinks, while leaving existing hyperlinks untouched. A string of text is classified as a link if: It starts at the beginning of a line or after a space ((^|\s)) It is not part of an HTML hyperlink or any ot ...

phphtmlhyperlinkpreg-replace

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites