Having trouble aligning elements in a single line using Bootstrap

I've been experimenting with different methods to align elements on the same line, such as using bootstrap and flexbox. However, I haven't been able to achieve the desired result. The goal is for the elements to stay on the same line even when the screen size is reduced. Please refer to the attached image for reference: https://i.sstatic.net/KLtd5.png

Thank you in advance!

#subject-bar-container {
background-color: #2c2c2c !important;
border-top: 1px solid white;
width: 100%
}

#subject-bar {
width: 12em;
height: 5em;
color: white;
font-weight: lighter;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease-in-out;
margin: 5px;
}

#subject-bar:hover {
transform: scale(1.02);
}

a:hover {
text-decoration: none !important;
}

.math {
background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}
<!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

htmlcssbootstrap-4flexbox

Answer №1

To adjust the display and overflow behavior of elements, you can utilize flex properties in CSS along with setting the overflow to hidden. Here is an example of how you can achieve this by incorporating the following code into your CSS:

.row ul * {
  display: flex;
  overflow: hidden;
}

ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

The result of applying these styles can be viewed in action through this JSFiddle link: https://jsfiddle.net/p3z8tq4r/

Answer №2

To accomplish this styling effect, utilize CSS properties such as flexbox. Take a look at the example code snippet provided below.

#subject-bar-container {
    background-color: #2c2c2c !important;
    border-top: 1px solid white;
    width: 100%;
}

#subject-bar {
    width: 12em;
    height: 5em;
    color: white;
    font-weight: lighter;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
    margin: 5px;
}

#subject-bar:hover {
    transform: scale(1.02);
}

a:hover {
    text-decoration: none !important;
}

.math {
    background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
    background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
    background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
    background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
    background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
    background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
  /*overflow:hidden;*/
}
<!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

If you found this solution useful and wish to deepen your knowledge in web development, feel free to explore my Web Programming Course.

Answer №3

If you're looking for a solution that meets your needs, consider this approach: I've made some adjustments to your code by removing the style and col-lg classes and embedding all the links into another div with the class col-sm-2. This change ensures that the layout remains responsive even on smaller screen sizes. Additionally, I've added CSS styling for ul elements so that the links stay in the same line regardless of the screen size. To learn more about using CSS flexbox, check out: https://www.w3schools.com/css/css3_flexbox.asp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
      #subject-bar-container {
        background-color: #2c2c2c !important;
        border-top: 1px solid white;
        width: 100%;
      }

      #subject-bar {
        width: 12em;
        height: 5em;
        color: white;
        font-weight: lighter;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease-in-out;
        margin: 5px;
      }
      .col-sm-2 {
        padding: 0;
      }
      #subject-bar:hover {
        transform: scale(1.02);
      }

      a:hover {
        text-decoration: none !important;
      }

      .math {
        background-image: linear-gradient(to bottom left, #0c144e, #6565b9);
      }

      .science {
        background-image: linear-gradient(to bottom left, #3c0c4e, #af65b9);
      }

      .history {
        background-image: linear-gradient(to bottom left, #4e4e0c, #b9b665);
      }

      .art {
        background-image: linear-gradient(to bottom left, #4e300c, #b99965);
      }

      .literature {
        background-image: linear-gradient(to bottom left, #205259, #4b9d90);
      }

      .music {
        background-image: linear-gradient(to bottom left, #0c325f, #60a6b7);
      }
      .row ul * {
        display: flex;
        overflow: hidden;
      }

      ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
      <div class="row">
        <ul>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="math">Mathematics</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="science">Science</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="history">History</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="art">Art</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="literature">Literature</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="music">Music</li>
            </a>
          </div>
        </ul>
      </div>
    </div>
  </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

Issue with blogger posts not showing thumbnails on the homepage

Check out my blog Lately, I've noticed that some of my Blogger posts are not displaying thumbnails in the home menu when using a custom template. However, after testing with different custom templates, I don't believe the issue lies with the tem ...

htmltemplatesblogger

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

javascriptjqueryhtmlfancyboxflexslider

The functionality to deselect multiple options in a select box is not functioning properly

There seems to be an issue with removing the selected attribute from the selected values in a jQuery multiselect box. The console is not showing any errors. You can view a working example here The problem lies in this code snippet: $("#mltyslct option ...

javascriptjqueryhtmlmulti-select

How can HTML be utilized to create a brief description?

I want to insert a link into the brief description that says "Read More..." which will direct the buyer to the main description further down on the product page when clicked. Can someone please provide guidance on how to achieve this? The URL for the link ...

htmlmagento

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

javascripthtmlcss

Adding data from PHP into a designated div element

update: After some trial and error, I managed to find a solution using jQuery and append() methods. From my PHP code, I created an array containing all the necessary information that I wanted to insert into the tab divs. I then encoded this array into JSON ...

phpjavascriptjquerymysqlhtml

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: https://i.sstatic.net/sCQii.png Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with t ...

htmlcss

Is there a way for me to determine if the HTML code is creating a new line?

Here is my code snippet: <div id="box"> <p> 123 </p> <p> abc </p> </div> <script> var html = document.getElementById("box").innerHTML; for (var i = 0, len = html.length; i & ...

javascripthtmlxml

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

What value does a variable have by default when assigned to the ko.observable() function?

I am in the process of learning KnockoutJS and I have implemented code for folder navigation in a webmail client. In the view code, there is a comparison being made to check if the reference variable $data and $root.chosenFolderId() point to the same memor ...

javascriptjqueryhtmlcssknockout.js

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

Click here How can I hide the "subline" line from the list and make it visible when the user clicks on the "sub" line, pushing the other lines down? I'm hoping for a solution that doesn't involve using Js or JQuery. Thank you in advance! ...

htmlcss

The issue with res.sendFile is that it is failing to display

I have encountered an issue while attempting to render HTML with res.sendFile using an absolute path. The encoded HTML is being displayed unrendered within a pre tag in the response. Below is the express code I am currently using: app.get('/', ( ...

htmlnode.jsexpress

Using JQuery for sliding left without having to use inline CSS

I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...

jquerycssmedia-queriesslidetoggle

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss

Why isn't my margin: auto code centering correctly?

My current struggle involves centering a div within the document. While I have successfully achieved horizontal centering, vertical centering remains elusive: width: 950px; height: 630px; background: #FFFFFF; margin: auto; Is it not expected that margin: ...

htmlcss