Dividing Space within Rows on Mobile Devices

When using the Bootstrap Grid System, everything appears fine on large devices. However, on small devices, there is no space between the divs.

<div class="row">
<div class="col-lg-1 col-md-1 col-xs-6">
<span class="fa fa-calendar"></span>&nbsp;Month<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6">
<asp:TextBox ID="txtMonth" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1 col-xs-6">
 <span class="fa fa-calendar"></span>&nbsp;Year<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6">
<asp:TextBox ID="txtYear" runat="server" Text="" CssClass="form-control"></asp:TextBox>
 </div>
</div>

https://i.sstatic.net/LwzkU.png

There seems to be a lack of spacing between these rows on mobile devices. How can this issue be resolved? While adding padding or margin to each div might solve it, is that considered the correct approach?

htmlcssbootstrap-4

Answer №1

Consider using media queries for responsive design

For instance:

@media (max-width: 600px) {
  .elementToUpdate {
    margin-bottom: 20px;
  }
}

By implementing this code, you can ensure that specific styles are only applied to screens with a maximum width of 600 px :) You can adjust margins within the media query to space out elements.

To learn more about media queries, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer №2

If you want to add some space above and below the column divs, consider using the bootstrap utility classes (.pt & .pb).

<div class="row">
<div class="col-lg-1 col-md-1 col-xs-6 pt-2 pb-2">
<span class="fa fa-calendar"></span>&nbsp;Month<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6 pt-2 pb-2">
<asp:TextBox ID="txtMonth" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1 col-xs-6 pt-2 pb-2">
 <span class="fa fa-calendar"></span>&nbsp;Year<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6 pt-2 pb-2">
<asp:TextBox ID="txtYear" runat="server" Text="" CssClass="form-control"></asp:TextBox>
 </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

Is the post secure if a HTTP web page sends an ajax request to a HTTPS url?

If I developed an HTML/jQuery widget to be embedded on third-party websites with users of very limited technical knowledge and potentially missing SSL certificates, would the information posted securely through AJAX Post to a secure URL remain protected? ...

htmlajaxsecurityhttps

Is there a way to append more selected elements to an existing array in PHP?

I'm encountering issues with a list box that is set to multiple selection. My setup consists of 3 individual list boxes: Categories (single select), Jobs (single select), and Tasks (multiple select). When a user selects an item in Categories, an ajax ...

javascriptphpjqueryhtmlajax

The navigation for Rails 5.0/Jquery Mobile is no longer responsive after a single click on the designated button

I've been struggling with this issue for a while now without any luck. The mobile navigation seems to be functioning correctly, but only when I refresh the page on my phone. After clicking on a list item, the navigation button becomes unclickable. I m ...

jqueryhtmlmobile

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

javascriptphpjquerycssbootstrap-4

Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

I'm in need of a custom checkbox with content inside that allows for multiple selections, similar to the example below: https://i.sstatic.net/CbNXv.png <div class="row"> <div class="form-group"> <input type ...

javascriptcssangulartypescriptbootstrap-4

Is it possible for a Bootstrap table to extend beyond the boundaries of a Bootstrap

Within my bootstrap container, there resides a boostrap table structured as such: <div class="container"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> ...

htmlcsstwitter-bootstrap

Tips for resolving the issue of '{' "readyState":0,"status":0,"statusText":"error"}' in an Ajax GET request

I am currently working on developing an API to input data into my website, which resides in different domains. Despite my efforts to format the response correctly, I am facing issues with my ajax calls failing to retrieve any data. One of the strategies I ...

jqueryhtmlajax

Guide to building a dynamic Slick slider complete with a sleek progress bar

I'm looking to customize my slider with a timer pagination feature using progress bars instead of dots, similar to how it is on . Currently, I am using slick.js for my slider implementation. What is the best way to replace the default pagination butt ...

javascriptjquerycsssliderslick.js

verify access with mysql database

Need urgent assistance, sorry if this is a repeated query due to my username! I am facing an issue with my login page. I want it to redirect to my home page when authentication fails by cross-checking input with a MySQL database which should output succes ...

phphtmlmysqldatabase

Manipulating elements repeatedly using jQuery

One of the issues I encountered while working with jQuery was appending a YouTube video when a button is clicked. To do this, I used the following code: onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.yout ...

javascriptjqueryhtml

Refresh the dropdown menu selection to the default option

My HTML dropdown menu includes a default option along with dynamically generated options using ng-options. The variable dropdown is bound to the dynamic options, not the default one. <td> <select ng-model="dropdown" ng-options="item as item.n ...

javascripthtmlangularjshtml-select

Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and a ...

htmlcsstwitter-bootstrap

Eliminating Redundant CSS Code Using PHP Storm

After upgrading to PHP Storm version 8.03, I came across an article that discussed the ability to search for duplicate CSS code using this link: . Although I have tried to find a way to automatically resolve these duplicate codes within PHP Storm, I have ...

phpcssformattingphpstorm

Unable to connect CSS/JS files to the HTML page

I followed a tutorial to set up my project which can be found here: However, when I run the gulp file, the CSS/JS files are not being linked. I have applied a background color to the body but it is not showing up. I installed Bootstrap 4 using npm and ad ...

javascriptcssnpmbootstrap-4sass

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

The href link on Android and iPhone devices is not activating, instead showing a focus rectangle

I've encountered an issue with the responsive layout of my HTML5 site on Android and iPhone versions. The links on the site are behaving strangely - they only work if I hold them down for a full second. Otherwise, they act as if a hover event is trig ...

androidiphonehtmlresponsive-design

How can I target an element with inline styling using CSS?

How can I target headings with inline style 'text-align: center' in my CSS so that I can add ::after styling to them? This is for a WordPress CMS, specifically to modify content in the WYSIWYG editor used by clients. Here's an example of th ...

css

`Angular 9 template directives`

I am facing an issue with my Angular template that includes a ng-template. I have attempted to insert an embedded view using ngTemplateOutlet, but I keep encountering the following error: core.js:4061 ERROR Error: ExpressionChangedAfterItHasBeenCheckedEr ...

htmlangulartypescript

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Having some trouble setting up Angular with SCSS and Bootstrap. When attempting to run ng serve, I encountered the following error: ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ...

cssangularsassbootstrap-5

Guide to building a robust tab system using JQuery and Ajax

I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...

jqueryhtmlajax