Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resolution?

 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary w3-animate-right w3-hover-shadow w3-teal 
w3-hover-indigo btn-block w3-text-white" style="font-weight: bold;width:40%;"
      href="#">Proceed to checkout page</a>

htmlcsstwitter-bootstrapbuttonresponsive

Answer №1

To address your issue with multi-line text in a button with a fixed width (set at 40%), you can use whitespace: normal.

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary  w3-animate-right w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;white-space:normal "
  href="#">Proceed to checkout page
</a>

If you are open to adjusting the width, another solution suggested by @csandreas1 is using display:table.

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary  w3-animate-right w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;display:table"
  href="#">Proceed to checkout page
</a>

Answer №2

To achieve this, simply adjust the display property to table in your CSS code.

element.style {
    font-weight: bold;
    width: 43%;
    display: table;
}

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 to prevent autoscrolling in an angular application when overflow-x is set to

In my socket event, I am using $scope.items.unshift(item) to place the new item at the top of the list. The html code includes <ol ng-repeat="item in items"><li>{{item.name}}</li></ol> An issue arises when a new item is added whil ...

javascriptjquerycssangularjs

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

Unable to show input in Javascript HTML

Every time I try to run this code on my webpage, the buttons do not seem to respond when clicked. I am aiming to have the user input for full name, date of birth, and gender displayed in the text box when the display button is clicked. When the next butt ...

javascripthtml

Using CSS to Showcase the Art Gallery Page

This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

jqueryhtmljsongetjson

I'm looking to add a next and previous button within my jumbotron- can anyone offer guidance?

As I near the completion of my Full Stack Nanodegree final project and await assistance from my instructor, I've taken on the task of developing my portfolio. However, I'm facing a challenge with implementing next and previous buttons within my j ...

javascripthtmlbootstrap-4

The RequiredFieldValidator and RegularExpressionValidator are not functioning properly

I have the following code snippet in one of my "C#" aspx pages. Despite having validation set up, the event attached to cmdPassword still fires even when the textbox is empty. Why are the validations not working? <tr> <td align="left" valign="t ...

c#htmlasp.netvalidation

Helping individuals identify the HTML5 Geolocation notification

Currently working on a website that requires users to accept the browser prompt for location sharing. Many users seem to overlook this prompt, which can lead to issues. The main problem we are facing is that each browser displays this prompt differently: ...

javascripthtmlgeolocation

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

Tips for importing a JavaScript file from a URL and initializing a class in a React component

I am looking to incorporate the PitchPrint app into a React website. They offer a tutorial for vanilla HTML/JS integration here. Following their instructions, I included script tags with links to jQuery and their app file in my index.html file. I then crea ...

javascripthtmlreactjs

Having trouble with enabling HTML5 mode to true on an Angular frontend and Laravel backend

I successfully removed the "#!" from my website URL and everything is working perfectly. The only issue I am facing is that when I try to reload a sub URL other than the home page, it shows a "page not found" error. However, I am able to access the same s ...

phpangularjshtmllaravel.htaccess

Looking for PHP function recommendations!

I need some help with creating a function in my PHP page. I want to create a function that can transfer a value from Field A to Field B. Here is my current code: <table class="table table-hover table-bordered"> <thead> <tr> <th ...

phphtml

Color of Bootstrap tooltip arrow outline and fill

How can I customize the background color and border color of the tooltip arrow in Bootstrap 4? $(function() { $('[data-toggle="tooltip"]').tooltip() }) .tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weig ...

csstwitter-bootstrapbootstrap-4

AngularJS: splitting the parent <div> into multiple sections every nth element

I have an array of strings in Javascript and I am attempting to use AngularJS to create nested <div> elements. var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; My goal is to group every 3 elements together like so. <div class="pare ...

javascripthtmlangularjs

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

I have developed an application using Streamlit that requires the ability to read multiple files simultaneously. To achieve this, I am utilizing the file_uploader() component with the parameter accept_multiple_files=True. I have two queries: Firstly, is ...

pythonhtmlpython-3.xstreamlit

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

jquerycsslist

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Is it possible to include all the information in a form submission, not just the inputs?

I have a problem with submitting the form and accessing all the variables I need. When I check the $_POST variable, I only see the values of the form inputs. Is there a way to also send other variables like the content of multiplicator1? How can I achiev ...

phphtmlformspost

Guide on creating an accessible table with rows that can be selected

Managing accessibility in a web application can be challenging, especially when dealing with features like selecting multiple rows using checkboxes. In my current project, I have a view that displays a list of items and allows users to select multiple rows ...

angularjshtmlaccessibility