Transforming button alignment from vertical to horizontal in Bootstrap based on the screen size of the device

My website features a series of vertically aligned buttons on the sidebar, styled using the following CSS:

CSS:

.sidebar {
    position: fixed;
    left: 20px;
    top: 5%;
    width: 120px;}

.sidebar .icons {
    font-size: 30px;
    margin: 21px;
}


HTML:

<section class="sidebar">
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
</section>

While the background image and center image of the website adjust responsively, these buttons remain vertical and do not scale, creating a significant blank area on mobile devices.

I am seeking solution to make these buttons align horizontally at the top of the page when viewed on mobile devices using Bootstrap. How can I achieve this?

htmlcsstwitter-bootstrap

Answer №1

For the grid system, it's recommended to utilize Bootstrap at this link

If you are working with bootstrap, you might consider structuring your code this way:

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href""><img class=="class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

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

Unable to adjust SVG fill color

I'm having trouble changing the fill color of an SVG when the user hovers over it. Can someone help me figure out why my code isn't working? svg:hover { fill: blue; } <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 ...

csssvg

What's the best way to keep track of the number of objects I've created

Using this HTML code, I can create member objects. However, I also need to determine the count of these member objects for certain calculations. Additionally, when a member object is deleted, the count of member objects should be reduced accordingly. The ...

javascriptc#htmlajax

Using JavaScript and Ruby on Rails to dynamically modify URL query parameters based on a dropdown form

I need help updating a URL based on dropdown selection. I want the query to be dynamic, and here is my current code snippet: <select id="mySchool" onchange="this.form.submit()"> <% @schools.each do |school| %> <option value="< ...

javascripthtmlruby-on-railsajaxforms

Why is it that using div with a 100% width doesn't behave as one would anticipate?

Learning CSS has been an interesting journey so far. It's not always as intuitive as one might think, especially in web development. :) I recently attempted to create a simple, static progress bar using the following HTML file: <html> <he ...

htmlcsshtml-table

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

pythonhtmlselenium

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

javascripthtmlcss

Organize a list using custom span values with JavaScript

<ul id="CoreWebsiteTopHeader_6_list"><li><a class="navigation" href="/seller"><span class="editableLinks" data-id="32638" data-sort="110">Seller</span></a></li><li><a class="navigation" href="/about">&l ...

javascriptjqueryhtmlhtml-lists

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

javascripthtmlangular

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

The click() function in jQuery executing only once inside a "for" loop

This is an example of my HTML code: <!DOCTYPE html> <head> <title>Chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px ...

javascriptjqueryhtml

Instructions on creating an "already clicked" style for an <a> href

Is there a solution to display my href as already clicked? I'm looking for a property or method that does not involve css or javascript. ...

htmlcss

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

javacssextjsseleniumselenium-webdriver

Display an icon to act as a separator between icons in CSS styling

Is there a way to display a spacer line before and after icons (cross symbols) while excluding the spacer line before and after buttons carrying the word "Cancel"? How can this be achieved? This is my CSS file: .Container > *:first-child::before, .Con ...

htmlcss

Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...

htmlcssimage

jQuery Mishap - Creating an Unspecified Issue

At the moment, my website displays a list of registered users in one column and their email addresses with checkboxes next to them in another column. Users can check the boxes and then click a submit button to generate a list of the selected emails separat ...

javascriptjqueryhtmlcss

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

javascriptjquerycss

Issue with displaying background image in h2 element

Consider me a novice who learns primarily through trial and error. Unfortunately, I'm stuck on this particular issue. My goal is to have an image appear behind the h2 text on my homepage, but despite my efforts, I can't seem to make it work. You ...

cssimagewordpressbackground-image

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

cssreactjstwitter-bootstrapmaterial-ui

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS. Interestingl ...

htmlcsssvg