Having issues with floats in Bootstrap?

I'm facing an issue trying to float two elements within a Bootstrap navigation bar, but for some reason it's not working.

.cls1 {
  float: left !important;
}

.cls2 {
  float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <div class="cls2">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-youtube-play" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-tumblr" aria-hidden="true"></i>
        <i class="fa fa-soundcloud" aria-hidden="true"></i>
        <i class="fa fa-vimeo-square" aria-hidden="true"></i>
        <i class="fa fa-linkedin" aria-hidden="true"></i>
        <i class="fa fa-rss" aria-hidden="true"></i>
      </div>
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">NATURE</a></li>
        <li><a href="#">TRAVEL</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT ME</a></li>
        <li><a href="#">MUSIC</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Could there be something I'm overlooking? Is there a conflict that's escaping my notice?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

there is a CSS class called .hidden-lg with specific styling rules.

@media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
    display: none!important;
}
@media (min-width: 1200px)
.hidden-lg {
    display: none!important;
}
@media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
    display: none!important;
}

These bootstrap classes ensure the entire element remains hidden from view within the DOM, activated when the window size drops below 768px.

Edit the code below and test it out:

.cls1 {
  float: left !important;
}

.cls2 {
  float: right !important;
}
@media (max-width: 768px) {
.cls3 {
float: right !important;
}
.cls2 {
display:none;
}
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
<div class="cls3 hidden-sm hidden-md hidden-lg">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
 </div>        
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">NATURE</a></li>
        <li><a href="#">TRAVEL</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT ME</a></li>
        <li><a href="#">MUSIC</a></li>
      </ul>
    </div>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
  </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

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

Ways to limit the display of search result page numbers at the bottom of the search results page using PHP

I'm experiencing an issue with limiting the number of search result pages in my PHP page. Currently, I have 3 fields for user input and the search results are displayed at the bottom. When all fields are selected, the page numbers keep increasing at ...

phpmysqlhtml

Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

I am currently working on incorporating a truncated text button using only CSS. The issue I'm facing is that the "show more" button doesn't ignore the line breaks or any other relevant HTML within the teaser and text body. This is causing too muc ...

htmlcsscheckboxlabeltruncate

issues with alignment between bootstrap div and canvas

I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want ...

htmlcssangularbootstrap-4three.js

Concealing Contact Form Using Javascript

Upon making adjustments to a website, I encountered an issue with the contact form. The form is meant to be hidden on page load and only appear when the envelope icon is clicked. However, currently the form is visible by default, and clicking the envelope ...

javascriptjqueryhtml

The homepage is displayed below the navigation bar

import Home from './components/Home/Home.jsx' import Navbar from './components/Navbar/Navbar' import {BrowserRouter, Routes, Route} from "react-router-dom" export default function App() { return ( <BrowserRouter> ...

cssreactjs

Is it possible to create an HTML interface with Google Workspace Add-ons?

Recently, I've been on a mission to create a Google Workspace Add On that can display an iFrame. My journey led me to explore the documentation for Google Apps Script and Google Add Ons. From what I've gathered so far, it seems that I'll ne ...

htmlgoogle-apps-scriptgoogle-workspace-add-ons

The alignment of inline contenteditable tags is not working properly in Internet Explorer

I am facing an issue where inline contenteditable span tags are working fine in all browsers except for IE. In Internet Explorer, the tags are not acting as inline and instead aligning themselves as block elements. This behavior seems to be caused by IE wh ...

cssinternet-explorerinlinecontenteditable

Trimming text down to a specified index

I am facing a challenge where I need to clip a String at a specific index, taking into consideration that the String may contain HTML tags. The goal is to skip over any HTML tags while clipping the text. For instance, if the initial String is: "Les pirat ...

javastringcpu-wordtruncatehtml

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Hello, I am just starting out with JS. Is there a way for me to customize the position and font of text in this JS Fetch function using CSS? Any help will be greatly appreciated. let file = 'art.txt'; const handleFetch = () => { fe ...

javascriptcss

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Generate and delete dynamic iFrames through variable manipulation

I'm currently developing a landing page specifically for our pilots to conveniently access weather information before taking off. However, due to the limitations posed by our computer security measures, I can only utilize iframes to obtain the necessa ...

javascripthtmlvariablesiframe

Troubleshooting Dynamic Input Issue - Incorrect Appending Behaviour - Image Attached

I am working on a project that involves adding input fields dynamically using JavaScript. However, I've encountered an issue where the styling of the first input field is not applied correctly when it is clicked for the first time. You can see the dif ...

javascriptphpjqueryhtmldynamic

Is there a way to eliminate the table-hover effect on specific rows in the table?

Here is some HTML: <table class="table table-striped table-bordered table-condensed table-hover"> .... </tr> <tr ng-repeat-end ng-show="modelRow.activeRow==car.name" class="hidden-table"> <td colspan="6"> ...

htmlcsstwitter-bootstrap

The input field within the mat-form has been styled to match the background of the page using CSS

I am currently facing an issue with the code below: Html: <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()"> <mat-form-field color="accent" appearance="outline"> <input ...

htmlcssangular-material

Javascript and CSS combo for creating a stylish fade effect

Hey everyone, I have a design challenge where I need to change the color of a picture inside a box when the user hovers over it. I have four boxes like this and my goal is to make everything else fade out when a user hovers over a specific box. Anyone kn ...

javascripthtmlcss

Style binding for background image can utilize computed properties or data for dynamic rendering

In my code, I am trying to pass an object that contains a string path for its background image. I have experimented with using data and computed properties, but so far I haven't had any luck getting them to work within the :style binding. However, if ...

javascriptcssvue.jsdata-bindingcomputed-properties

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

Can JQuery be used to identify the CSS styles applied to selected elements?

Highlight the text by selecting it and clicking a button. If the text is already highlighted, clicking the button should make the selected text return to normal. Can this be achieved using jQuery and a single button? Is it possible to identify the CSS st ...

javascripthtmljquerycss

Can you explain the purpose of the text-align property set to justify-all?

Can you explain what the CSS property text-align: justify-all does? According to MDN, it should justify even the content of the last line. However, I am not seeing any changes in my Chrome browser: <p style="text-align: justify-all"> one two thre ...

htmlcssw3c