Within a div, I have noticed that when viewed on various screen resolutions, the three buttons are responsive. However, on certain screens, the last button appears below the first two buttons with no margin between them.
Is there a method to add this margin without relying on media queries?
To create space between buttons, simply utilize the margin-bottom property. Remember to set the buttons as display: inline-block;:
.btn {display: inline-block; margin: 0 0 10px; width: 200px; text-align: center; border-radius: 10px; padding: 5px; border: 0;}
.one {background: #99f;}
.two {background: #9f9;}<button class="btn one">One</button>
<button class="btn one">Two</button>
<button class="btn two">Three</button>Preview
https://i.sstatic.net/fBdBQ.png
You can adjust the margin-bottom value to control the spacing between the buttons.
Utilize Bootstrap for a worry-free solution!
Take a look at this snippet:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row text-center">
<button type="button" class="btn btn-lg col-md-3 col-md-offset-1">Button One</button>
<button type="button" class="btn btn-lg col-md-2 col-md-offset-1">Button Two</button>
<button type="button" class="btn btn-lg col-md-3 col-md-offset-1">Button Three</button>
</div>I am facing an issue with displaying validation messages simultaneously. Currently, only one message is being displayed: $('input').bind('click', function(){ var checkboxes_claimType = $("#field-claimType-wrapper").fin ...
I am facing an issue with a PHP page that is generating a JSON object. I have another page using the jQuery library and trying to access this object, but it's not working as expected. Instead of 'inside_ok', I see the message 'inside_nk ...
I am trying to ensure that markers on the map do not get erased when zooming in or out. Here is my script: JS $(document).ready(function() { //initialization var map; var markerPosition; // Marker position var options = { restrictedE ...
I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...
I'm currently working on a web app where the navigation bar's height unexpectedly changes on mobile view, doubling in size. Here's how it normally appears: https://i.sstatic.net/kQXdR.png And here is the enlarged version on mobile: https: ...
Having some webfont service issues with jscrollpane. It seems like the height of jscrollpane is being calculated based on the default font size before switching to the webfont, causing the div to be slightly longer and cutting off text. I tried using auto ...
Is it possible to adjust the height of a section to match the background using CSS? Currently, the height is determined by the content within the section. CSS: .content-block { background-size: cover; background-position: center center; } HTML: &l ...
I am looking to apply styles based on the data attribute value matching an AJAX get request Here is my jQuery code: jQuery(function($) { get_stock(); function get_stock(){ $.ajax({ url: vdisain_vd.url, ...
Looking for advice on setting up a sleek email signup bar that remains at the top of the browser while users scroll and navigate through different pages. I am working with WordPress and have jquery already loaded, but have not yet worked with either. Up ...
Although I have tried looking for solutions in other forums, I am still facing issues with a particular question that I cannot seem to resolve. My situation involves calling a template via ajax which sets some PHP variables inside it, and I am struggling ...
Is there a way to only trigger a function upon successful Ajax call? This is my Ajax function: $.ajax({ type: "POST", url: url, dataType: "json", success: function(msg) { console.dir(msg); if(ms ...
1 How can I troubleshoot the error that is popping up? I believe the issue may be related to it being a dictionary. Any suggestions on how to fix this problem? views search(request): if "q" in request.GET: querystring = request.GET.get(" ...
After reviewing the HTML table below. Follow this jsfiddle link: <table id="tabla" align="center" cellspacing="15" cellpadding="0"> <tr> <td><input type="button" value="Form View"></input></td> < ...
In my code, I am attempting to extract data from a JSON file. The JSON data does not have any brackets, just an array separated by commas. However, when I retrieve the data using $scope, an extra square bracket is added outside of my output. Here is a demo ...
When is it ideal to choose rem over px units in CSS? Many articles advocate for using REM to accommodate user preferences, particularly when it comes to font size. However, the focus tends to be solely on font size rather than considering other aspects lik ...
Just starting out with html and css, and I'm working with a checkbox: <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> My goal is to display a hand icon when hovering over the checkbox. Ho ...
I am working on a project where I need to add user information to the database by calling a function in my controller class. The user's information is entered through a form created in a .cshtml file that interacts with an external JavaScript file. Is ...
Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...
I'm currently facing an issue with a pop-up form that utilizes preventDefault on the submit button to avoid immediate submission. Using jQuery, I send the input to an AJAX function and aim to display a message to the user based on the AJAX function&ap ...
Hello, I am a beginner in programming and I am currently working on developing a word guessing game. Here is the code I have written so far: The (letter) represents the key being typed by the player Var compareLetters = $('.letter') represents ...