Ensure that buttons appear neat and organized when viewed on mobile devices

As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views.

In the desktop view, you can see the buttons here: https://i.sstatic.net/C8JCp.png

And in the mobile view, they are displayed like this: https://i.sstatic.net/IBPP0.png

My goal is to add some spacing between rows in the mobile view, similar to what is shown here: https://i.sstatic.net/fU55k.png

This is the code I am working with:

<?php
include "header.php";
include "navbar.php";

// Button creation code goes here

include "footer.php"
?>

If anyone has any suggestions or solutions for adding spacing between rows in the mobile view, please let me know. Thank you in advance for your help. Please excuse any errors in my English language skills.

htmlcssbootstrap-4

Answer №1

In order to achieve this, you will need to apply a bottom margin of 5px to all buttons as shown below:

.btn-Margin{
  margin-bottom : 5px
}
<div style="text-align: center;">
    <button type="button" class="btn btn-info btn-Margin">January</button> 
    <button type="button" class="btn btn-info btn-Margin">February</button>
    <button type="button" class="btn btn-info btn-Margin">March</button>
    <button type="button" class="btn btn-info btn-Margin">April</button>
    <button type="button" class="btn btn-info btn-Margin">May</button>
    <button type="button" class="btn btn-info btn-Margin">June</button>
    <button type="button" class="btn btn-info btn-Margin">July</button>
    <button type="button" class="btn btn-info btn-Margin">August</button>
    <button type="button" class="btn btn-info btn-Margin">September</button>
    <button type="button" class="btn btn-info btn-Margin">October</button>
    <button type="button" class="btn btn-info btn-Margin">November</button>
    <button type="button" class="btn btn-info btn-Margin">December</button>
</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

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

javascriptjqueryhtmlnode.jsexpress

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

javascriptjquerycsszurb-foundation

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

What is the best way to apply a Javascript function to multiple tags that share a common id?

I am experimenting with javascript to create a mouseover effect that changes the text color of specific tags in an HTML document. Here is an example: function adjustColor() { var anchorTags = document.querySelectorAll("#a1"); anchorTags.forEach(func ...

javascripthtmlcss

Expanding columns to reach the full height of the page

Struggling to create three columns within the colmask and threecol div classes, excluding the header and footer. Any suggestions? Check out the website at I've attempted setting the body and html tags to 100% height. I've also experimented with ...

htmlcss

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...

csscss-selectorsparent

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

How can I apply styles to table cells based on their data type using HTML and CSS?

On a webpage, I have a standard table/th/tr/td setup that presents tabular information. The columns can be rearranged: product|price|date price|product|date date|product|price ... and so forth. However, the original order remains consistent for each disp ...

htmlcss

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

javascriptjquerycss

Implement a maximum height restriction on the children of the Select component in Material-UI

Currently, I am working with the Material-UI react library to create Dropdown menus by utilizing components like <FormControl>, <Select>, and <MenuItem>. The options array for these dropdown menus is quite extensive, and I am looking to s ...

cssreactjsmaterial-ui

Toggle textboxes using jQuery depending on the radio button choice

I'm trying to make specific textboxes appear when a particular radio button is clicked on my form, but I want them to remain hidden otherwise. Here's an example of what I've implemented: HTML: Radio buttons: <p>Show textboxes<inpu ...

javascriptjqueryhtmlonclickradio-button

Is there a way to center the text vertically within an anchor tag?

How do I align text vertically within an anchor tag? Here's a visual representation of the issue: The text "Publisher Search," "Add a New Publisher," and "Edit a Publisher" should be aligned vertically in the "bar." This is the coding structure: & ...

htmlcss

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

javascripthtml

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

Selenium is throwing an error indicating that a list object does not have the attribute to find an element

In my quest to extract nutritional data from a website through web scraping, everything was going smoothly until I encountered pages with slightly different formatting. When using selenium and a specific line of code, I noticed that it returned an empty l ...

pythonhtmlseleniumxpathweb-scraping

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

javascriptphphtmljqueryajax

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Styling buttons with CSS in the Bootstrap framework

I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...

cssbuttontwitter-bootstraphover

What is the reason behind the inability of this YouTube instant search script to enable fullscreen mode?

Looking to implement a Youtube instant search on my website, I came across this script that seems ideal for my needs. However, I'm facing an issue where the iframe is not displaying the allowfullscreen property. Can anyone assist with this problem? Th ...

javascriptjqueryhtmlajax