CSS styling to customize Bootstrap

My strategy for creating a basic daily diary is as follows:

<div class="panel panel-primary">
  <div class="panel-heading">June</div>
  <div class="panel-body">
25
<br>
 <span class="glyphicon glyphicon-time"></span>
  </div>
</div>

Below is the corresponding CSS code:

.panel{
    border-color:#EEEEEE !important;
    width: 150px;
}

.panel > .panel-heading {
    background-color: greenyellow;
    color: white;
    height: 40px;
    text-align: center;
    border-color:black !important;
    font-size: 20px;
}

.panel> .panel-body{
    text-align: center;
    font-family: "Comic Sans MS";
    font-size: 35px;   
}

.glyphicon{
    font-size: 20px !important;
    text-align: left !important;
}

I'm trying to position the glyphicon on the left side, but due to it being nested within panel-body that has a centered alignment, it's proving difficult. Even using "!important" doesn't solve the issue.

If anyone can provide assistance, I would greatly appreciate it.

htmlcsstwitter-bootstrap

Answer №1

If you take it outside of the class="panel-body", it should work fine.

Here is a working example:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
             .panel{
    border-color:#EEEEEE !important;
    width: 150px;
}

.panel > .panel-heading {
    background-color: greenyellow;
    color: white;
    height: 40px;
    text-align: center;
    border-color:black !important;
    font-size: 20px;
}

.panel> .panel-body{
    text-align: center;
    font-family: "Comic Sans MS";
    font-size: 35px;   
}

.glyphicon{
    font-size: 20px !important;
    text-align: left !important;
}
           </style>
           
           </head>
           <body>
           <div class="panel panel-primary">
  <div class="panel-heading">June</div>
  <div class="panel-body">
25
<br>
  </div>
 <span class="glyphicon glyphicon-time"></span>

</div>

           </body>
           </html>

`I hope this solution helps!

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

Dealing with the Access-Control-Allow-Origin error: a beginner's guide to enabling CORS with a straightforward web stack and Guice integration

Am I facing issues due to the technologies involved or is it my lack of understanding about them? Currently, I have an HTML5 application built with JavaScript and HTML, hosted on an Apache 2.2 server. Additionally, there is a Java application developed w ...

javahtmlapachecross-domainguice

Twitter bootstrap thumbnails are not displayed adjacent to each other

<article <?php post_class(); ?>> <header> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <?php i ...

phphtmlcsswordpresstwitter-bootstrap

When sorting items, the page automatically jumps to the top of the screen

I have been working on creating a sortable portfolio using jQuery. One issue I am facing is that every time I click on a filter for the portfolio items, the page automatically scrolls to the top. Is there a way to prevent this from happening? You can vi ...

jqueryhtml

Is there a way to align the content in my Flexbox rows to the top of each cell, resembling a table layout?

I am currently facing challenges in aligning my layout correctly, especially on resolving the final adjustments. In the scenario described below, everything seems to work fine when the message_data <span> elements contain a single line of data. Howe ...

htmlcssflexbox

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Imagine a scenario where I have a page located at: www.mydomain.com When a user clicks on a button, it triggers the opening of a new window using: newWin = window.open("https://www.otherdomain.com","a","height=800,width=1000"); Now, my objective is to m ...

javascriptjqueryhtmldomwindow

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

javascripthtmljquerycss

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

javascripthtmlvue.js

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

javascriptjqueryhtmlcss

Enhance the efficiency of your website by ensuring that js/css files are loaded before the completion of the HTML

Currently, my website uses a template system involving XML/XSLT which outputs the generated HTML in one piece after completing all its tasks. As a result, browsers tend to start downloading all the content only after the entire HTML is generated, causing d ...

phphtmlperformanceapachetemplate-engine

The controller's variable does not appear to be updating the user interface as expected

When the HTML page loads, I call a function within an angularjs controller (discussions()), which sets a value to a variable ($rootScope.name). Later, when I click a button on the same HTML page, it triggers a series of JavaScript functions. The final Java ...

javascripthtmlangularjs

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

cssreactjsmaterial-ui

Struggling to make the image adapt to mobile screen sizes, even after applying a width of 100% and

After spending countless hours researching online, I still can't figure out how to make the image responsive on mobile devices. On a computer screen, it looks fine: https://i.sstatic.net/sCPbA.png However, when I inspect the element and view the ima ...

htmlcssimageresponsive

Removing values when disabling a button using JavaScript

Within my code, I have two tables - one for non-clickable teams and another for clickable matches. Check out the image of the tables View the code on my GitHub repository let teams = [ {name: 'Roma', points: 0, wins: 0, draws: 0, loses: ...

javascripthtmltwitter-bootstraponclickfrontend

Using PhantomJS webdriver in Python Selenium to disable CSS styling

There seems to be some uncertainty surrounding the ability to disable CSS while utilizing the PhantomJS webdriver for Selenium. It has been established that this is achievable with FireFox by adjusting the FireFox profile, but I am interested in doing so w ...

pythoncssselenium-webdriverphantomjs

Stretch the div to the right and maintain its horizontal width

I am in the process of coding a two-column layout, with a total width of 980px. Each column will have a background that expands all the way to the left and right sides as shown in the screenshot here. On the left side, there is a blue div with a width of ...

css

Properly positioning images within a v-carousel module

In my v-carousel, I have set a height of 40vh. The images inside the carousel are of different sizes, and I want to ensure that none of them get cut off. To achieve this, I used "contain" for the v-image along with a maximum height matching the carousel co ...

cssvue.jsalignmentvuetify.js

The background image of the li element is not appearing in Firefox browser

I'm facing an issue with an HTML code snippet on my page that looks like this: <section class ="sidebar"> <ul> <li class="facebook">Facebook</li> <li class="linkedin">LinkedIn& ...

htmlcss

"An interactive webpage utilizing HTML5 that transmits sensor information from an iPhone to a server

Recently, I have been immersed in a project that involves utilizing the gyroscope of an iPhone to manipulate items on a computer screen. To achieve this, I have been using an application called "Sensorlogger" which allows me to stream sensor data to the co ...

htmlaccelerometersensorsgyroscope

Customizing Widths in Bootstrap 5: A Comprehensive Guide

Is it feasible to establish custom widths in bootstrap 5? The official documentation only addresses setting the width proportionate to the parent container (25%, 50%, 75%, or 100% of the parent's width) or proportional to the viewport (vw-100 etc.). I ...

cssbootstrap-5

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Seeking assistance from fellow developers. Working on a PHP web app utilizing the Yii MVC framework and its array of tools. Specifically, I am looking to dynamically refresh a div every 10 seconds. Currently, my Ajax function looks like this: <script t ...

jqueryhtmlajaxrefresh