I am attempting to create circular buttons for numbers, but I am having trouble centering the text within the button. Ideally, I would like to have 15 circular buttons numbered from 1 to 15.
Below is the code snippet:
body {
padding: 1em;
}<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
>
<button type="button" class="btn btn-info btn-circle btn-lg">100</button>The code snippet above was sourced from this link
If you're looking for a quick and easy solution, this simple class can help:
<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>";
<meta name="viewport" content="width=device-width, initial-scale=1.0>";
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
body {
padding: 1em;
}
</style>
</head>
<body>
<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>
</body>
</html>Follow these steps to create circular buttons with centered text:
First, import the necessary .btn-circle css rules,
Next, surround the button text with a span element and apply negative margins to the span.
body {
padding: 1em;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
/* use negative margins to accommodate wider button text */
.btn-circle span {
margin: 0 -2rem;
}<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
>
<button
type="button"
class="btn btn-info btn-circle btn-lg"
><span>100</span></button>To achieve rounded corners for .btn-circle, the CSS code needs to be included. By modifying the CSS code provided in the link, I removed the padding to ensure text alignment at the center. The updated CSS snippet is as follows:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 0; // modified
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 0; // modified
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 0; // modified
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-circle btn-lg">100</button>When working with Bootstrap 4 and utilizing SCSS variables, I successfully created circular buttons that align perfectly with the default button sizes.
Check out the code snippet below:
SCSS
$btn-height-border: $btn-border-width * 2;
$btn-circular-height: add(
$btn-line-height * 1em,
add($btn-padding-y * 2, $btn-height-border, false)
);
$btn-circular-height-sm: add(
$btn-line-height-sm * 1em,
add($btn-padding-y-sm * 2, $btn-height-border, false)
);
$btn-circular-height-lg: add(
$btn-line-height-lg * 1em,
add($btn-padding-y-lg * 2, $btn-height-border, false)
);
.btn-circular {
width: $btn-circular-height;
height: $btn-circular-height;
padding-right: 0;
padding-left: 0;
border-radius: 50%;
line-height: 1;
&.btn-sm {
width: $btn-circular-height-sm;
height: $btn-circular-height-sm;
}
&.btn-lg {
width: $btn-circular-height-lg;
height: $btn-circular-height-lg;
}
}
Codepen Link: https://codepen.io/andreivictor/pen/vYvBJKB
styling an user icon using css
<style>
.user-icon-circle {
width: 50px;
height: 50px;
background-color: #009688;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
</style>
html code for the user icon circle
<div class="user-icon-circle">
<i class="fas fa-user"></i>
</div>
Greetings, <div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck1"><label class="form-check-label" for="defaultCheck1">Default checkbox</label></div> Is there a way to disable the ...
https://i.sstatic.net/1PhFl.jpg The content underneath my fixed header is getting covered slightly by the header, rather than aligning perfectly with it. Ideally, the top of the carousel should be right below the bottom of the header to occupy the entire ...
I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...
Currently, I am incorporating Bootstrap into my project and I am attempting to include a Twitter Bootstrap tab. I have already added jQuery and bootstrap-tabs.js to my project. Below is the script that I have added: <script> $('#myTab a&apos ...
I am working with an HTML file that contains a textarea tag. My goal is to copy and paste text with multiple lines into the textarea and then use JavaScript to extract the last three lines into three separate variables. The textarea has the id "txt" a ...
Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...
Are there any resources that explain how to style the input type "time" completely? I have been searching but unable to find a comprehensive guide with all the necessary style attributes! The only example I came across is: input[type="time"]{ /**styl ...
I am currently using CodeIgniter for a project. In the "v_pembayaran_admin" page, there is a table named "pembayaran" which includes a column called "nama_user". The data for the "nama_user" column is sourced from the "pendaftar" table but is accessed thro ...
My webpage utilizes Bootstrap 4 and features a horizontal navigation menu. However, on smaller devices, the menu collapses and the items remain in a horizontal layout. How can I modify it to display the items vertically, with one item per line? ...
I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling. For example: [x] [x] [x] Here is a simplified ve ...
As I work on building a practice website, I've noticed that I have an IMG tag for the website logo on every HTML subpage. I'm wondering if it would be more efficient to use a background image in CSS instead of the IMG tag? <div id="logo_w ...
Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...
I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...
While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...
Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...
It's frustrating that despite all my efforts, I'm still stuck on implementing a small feature for the past 5-6 hours. I need assistance with storing a single variable in the user's localStorage, initially set to 1. When the user clicks a but ...
Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...
Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling. I have figured out how to keep it visible at ...
I am experiencing an issue with a table where the top row has a position:relative attribute. In Internet Explorer 9, adding this attribute causes the border between the cells to disappear (this does not happen in Chrome). Although my question is similar t ...
Is it possible to create a CSS grid system that meets the following requirements: The grid should have arbitrary height (with consistent width) and when a grid overflows, it should stack vertically underneath the preceding grid, regardless of other grid ...