Text on Bootstrap buttons does not adapt to different screen sizes

https://i.sstatic.net/9Hc9w.png I've been struggling to make the button text responsive, but all my attempts have failed. Below is the HTML code I've been using:

<button style="margin-top : 5px;" 
        type="submit" class="btn btn-primary cd-admin-create-modal-btn" ng-disabled = "form.$invalid"
        ng-click="submitRouterDtls(router);">Submit
</button>
<button style="margin-top : 5px;" 
        type="submit" class="btn btn-primary cd-admin-create-modal-btn"
        ng-click="cancelOperation();">Cancel
</button>

And here is the CSS code I've applied:

.cd-admin-create-modal-btn {
     width: 5vw;
     margin: 0 1vw;
     font-size : 1.5vw;
}   

If anyone has any suggestions or solutions, I would greatly appreciate the help!

Answer №1

give it a shot

.cd-admin-create-modal-btn {
  min-width: 10vw;
 margin: 0 1vw;
 font-size : 1.5vw;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button style="margin-top : 5px;" 
                         type="submit" class="btn btn-primary cd-admin-create-modal-btn" ng-disabled = "form.$invalid"
                            ng-click="submitRouterDtls(router);">Submit
                        </button>
                        <button style="margin-top : 5px;" 
                            type="submit" class="btn btn-primary cd-admin-create-modal-btn"
                            ng-click="cancelOperation();">Cancel
                        </button>

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

How can I make <p> elements change color when scrolling?

My Goal https://i.sstatic.net/JbdXR.gif I aim to bring attention to the <p> element as the user scrolls on the page. Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down. My Attempt window.o ...

When rendering in React, retrieving the value from sessionStorage always yields a single result

I have encountered an issue with storing the jwt key in localStorage when a user logs in. I am trying to make the app render either "Login/Register" or Logout buttons/links based on whether the key exists. However, the function I created seems to always re ...

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

Struggling to line up text boxes with CSS borders within div elements in a neat row

Here is the HTML snippet with a div containing four sub divs with a class named 'city' that I'm trying to align in one row using Bootstrap. I have included my stylesheet below the HTML, and despite spending over an hour adjusting margins, I ...

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

Leveraging custom properties in HTML elements with JavaScript

I am in the process of creating a straightforward battleships game that utilizes a 10x10 table as the playing grid. My goal is to make it easy to adjust the boat length and number of boats, which is why I'm attempting to store data within the HTML obj ...

What is the best way to extract the body content from a Markdown file that includes Frontmatter

How can I retrieve the content of the body from my markdown file using front matter? Currently, it is displaying as undefined. What steps should I take to fix this issue? {latest.map(({ url, frontmatter }) => ( <PostCard url={url} content={frontmat ...

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

Tips for customizing fonts in a WordPress object

WordPress is sending me an object that I need to work with. The main issue at hand: the font styles of WordPress posts in my app are all inconsistent. How can I go about styling these fonts uniformly? Take a look at this Plunkr if you'd like to expe ...

How can I create clickable table entries using php and html?

I want to create a table on this page that is clickable. When the user clicks on a row, the data from that row will be sent to a PHP file with a form prepopulated with the selected user's information for updating purposes. <!DOCTYPE html> &l ...

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

JavaScript effectively divides multiple child dropdowns with the main dropdown, thanks to Bootstrap innovation

I have implemented a jQuery function to dynamically change multiple child dropdowns based on the selected value of the main dropdown. For reference, you can view the image here. However, I encountered an issue when applying the Bootstrap styles "form-con ...

Changing the order of element names depending on their location within the parent element using jQuery

<div class="content"> <div> <input type="text" name="newname[name]0"/> <div> <input type="text" name="newname[utility]0"/> <div> <textarea name="newname[text]0 ...

Steps to insert a Drop-Down Sub-Menu

I'm just about finished with my navigation panel. Any tips on how to add a sub-menu? I currently have one in the Product page. Below is the HTML code containing the sub-menus: <nav> <ul> <li><a href="">HOME</a>&l ...

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...