Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below

https://i.sstatic.net/aVGwV.png

Here is my code:

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default text-center shadowed">
            <p>
                Collected This Quarter <br>
                <b>$8084</b>
            </p>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="panel panel-default text-center shadowed">
            <p>
                Average Property Income YTD <br>
                <b>$16,985</b>
            </h4>
        </div>
    </div>
</div>

However, the output I'm getting looks like this:

https://i.sstatic.net/OfbSp.png

Any suggestions on how I can achieve the "shadow" effect outside the panels and have the text inside with a font similar to the image above?

Thank you

cssbootstrap-4

Answer №1

I encountered a similar issue in the past, but I found a workaround that worked for me.

  • To address this problem, start by adding top-level child divs and apply padding to them (e.g., p-1). Their main purpose is to hold content.
  • Next, within each top-level div, insert your cell's primary content and style it according to your preferences.

Below is the code snippet:

<div class="parent row">
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
          <p class="p-0 m-0">
              Collected This Quarter <br>
              <b>$8084</b>
          </p>
      </div>
  </div>
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
        <p class="p-0 m-0">
          Average Property Income YTD <br>
              <b>$16,985</b>
          </h4>
      </div>
  </div>
</div>

In my case, I typically reset padding and margins for the .row and .col classes like so:

<style>
  .row, .col-lg-6 {
    padding: 0;
    margin:0;
  }
  .child {
    background-color: white;
  }
  .parent {
    background-color: #F3F4F5;
  }
</style>

The final layout looks like the image below: https://i.sstatic.net/jlUny.png Please note that I used bg-dark and bg-light classes to demonstrate the parent and child divs' background colors. You can customize these colors as needed.

Answer №2

Take a look at how the .panel-body wrapper is being used here

Click this link for more details

I recommend using the most recent Bootstrap version for access to shadow and spacing utility classes.

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

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: https://i.sstatic.net/X2Yqg.png For reference, here's the HTML ...

htmlcss

I aim to arrange three div elements in a single row with varying widths - placing one on the left, another in the center, and the last

I am trying to have three div elements in one row with different widths - one on the left, one in the center and one on the right. The left div should be 160px The center div should be 640px The right div should be 160px My goal is for them to appear se ...

csshtml

I am encountering challenges and confusion with CSS

I am encountering an issue with my code that is causing some difficulties. The goal is to create a basic div with left, right, and center panes. The left pane loads perfectly, but the right pane, which has the same css styling, displays its children with a ...

htmlcss

"Sliding through pictures with Bootstrap carousel placed beneath the

Currently, I am working on a website that requires a background image, although I personally do not prefer it. The client's preference is to have the navbar transparent so that the background image shows through it. Now, I would like to incorporate a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file: @font-face { font-family: "Akrobat-Regular"; src: url('/assets/Akrobat-Regular.otf') format("truetype"); } body { color: #1c1c1c ...

htmlcssfonts

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether: MainDiv - Always Visible SecondDiv - Display or conceal when MainDiv is clicked on ThirdDiv - Display or conceal when SecondDiv is clicked on <div c ...

javascriptcssangularjsionic-framework

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

htmlcss

Hiding content using the "display: none" CSS property may not function properly

I am facing an issue where my html code for email templates works perfectly on all platforms except for Microsoft Outlook Desktop. The problem lies in the display of product information that is not showing correctly in Outlook. Within my code, I have keys ...

htmlcssemailoutlookhtml-email

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

Deactivate interactive functions on the mat-slider while preserving the CSS styling

I'm attempting to create a mat-slider with a thumb label that remains visible at all times. Below is my mat-slider component: <mat-slider class="example-margin" [disabled]="false" [thumbLabel]="true" [tickInterval]="tickInterval" ...

javascripthtmlcssangularangular-material2

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Due to the readability issues of the navigation color against a specific image, I am looking to modify it for a particular page. Below is the HTML code: <div id='nav'> <ul> <li id='navBiog'> ...

jquerycsspseudo-class

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

Changing the border color of an input field to red when an alert is dismissed

Currently, I am using a jquery conferm.js alert for an input field when a button is pressed. If the input field is empty, an alert pops up in default bootstrap 4 blue color. However, I want it to be red and focused on that field at that time. When the user ...

javascriptjquerybootstrap-4

Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one. Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome. The goal is to ...

htmlcssbootstrap-4flexbox

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links. On smaller screens, when the toggle ...

htmlcssbootstrap-4

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

javascriptjqueryhtmlcss