Currently, I am incorporating bootstrap icons into my design. Feel free to explore the provided DEMO. It showcases the issue of the bootstrap icons not aligning in the same line as the text inside the button.
I am seeking advice on how to centralize the icon within the same a tag to avoid any awkward visual discrepancies.
To achieve the desired look, apply the following CSS styling:
.error-template {
padding: 40px 15px;
text-align: center;
}
.error-actions {
padding: 15px;
display: flex;
justify-content: center;
}
.error-actions .btn {
margin-right: 10px;
}
.error-actions a {
display: flex;
align-item: center;
justify-content: center;
}
.error-actions a i {
margin-right: 10px;
line-height: 1.3;
}
For more examples and demonstrations, visit Codepen: https://codepen.io/manaskhandelwal1/pen/XWjPWOR
There seems to be a line-height issue that can be fixed by overriding the CSS for these icons with the following code snippet.
.error-actions i[class^="bi-"]::before, .error-actions i[class*=" bi-"]::before {
line-height:1.2 !important;
}
FULL WORKING CODE:
.error-template {
padding: 40px 15px;
text-align: center;
}
.error-actions {
margin-top: 15px;
margin-bottom: 15px;
}
.error-actions i[class^="bi-"]::before, .error-actions i[class*=" bi-"]::before {
line-height:1.2 !important;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594c98d878b8a97a4d5cad7cad4">[email protected]</a>/font/bootstrap-icons.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="error-template">
<h1>
404</h1>
<h2>
Oops! Page Not Found</h2>
<div class="error-details">
Sorry, but the page you were trying to view does not exist.
</div>
<div class="error-actions">
<a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Go to Homepage </a>
<a href="/" class="btn btn-secondary btn-lg"><i class="bi bi-envelope-fill"></i> Contact Support </a>
</div>
</div>
</div>
</div>
</div>Is it possible to trigger a function once an animation is complete using jQuery? Here's the code I'm working with: $('html, body').animate({scrollTop:$("body > .addAccountForm1").offset().top }, 'slow'); I want to execut ...
I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...
I am facing a design challenge with my webpage where the content is 1000px wide. In the middle of this page, I want to showcase an image that is 600px high and 2000px wide. The tricky part is ensuring that this image remains 600px high, maintains its aspe ...
I'm looking to customize a stepped HTML5 range slider by changing the background color for each step, similar to the image provided. Is this customization achievable? ...
In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...
Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies sp ...
We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...
A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...
I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...
Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...
I am attempting to set up checkboxes that will display different images when checked and unchecked. Below are the checkboxes I am currently using: <input type="checkbox" name="fordCheckBox" value="Ford"> To assign background images to each checkbox ...
I'm facing an issue with my materialize footer's text disappearing when I set the height to 35px. Whenever I decrease the size of the footer, the text goes off the screen. How can I adjust it so that it stays visible? <footer style="positio ...
After creating a script to test output from my database, I encountered an issue. While the PHP portion works perfectly, extracting the data into an HTML div tag does not. Any suggestions on how to fix this would be greatly appreciated. Thank you. //Establ ...
A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...
I'm currently working with an Angular5 project that has a <select> element bound to an array of customers. Here's the code snippet: <select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name=" ...
My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...
It's common knowledge that there is a bug in bootstrap modals on certain devices, causing the page behind the modal to scroll instead of the modal itself (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) An easy fix for this ...
While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...
I'm attempting to associate a class with an object property, but I encounter an issue when trying to trigger the @click event on the list object - the console states that it cannot read the isSelected property of the object. My goal is to activate a c ...
Is it possible to find my friends by obtaining their location from their mobile phones when they are near me? I have a code snippet below with the variable cities where I can input the numbers of my friends. Can I achieve this or do I need to make some m ...