Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron.

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

The idea is to have each 'minitron' contained within a main <div> with the minitron class, consisting of an icon (Glyphicon), a name, description, and a 'Learn More' button.

However, my CSS skills are lacking and I'm struggling to achieve the layout I envision, as evident in the fiddle provided.

Below are the CSS rules I tried implementing:

.minitron-icon {
    width:20%;
    height: 20%;
    margin: 5px;
}
.minitron-name {
    font-size: 18px;
}
.minitron-desc {
    width: 80%;
    margin: 5px;
}
.minitron-learnmore {
    width: 95%;
}

Can anyone point out where I might be going wrong?

Answer №1

Would you like to check this out? https://jsfiddle.net/oh69hq71/17/

This design utilizes the Bootstrap grid system with rows and columns. The first row includes a glyphicon and name/description, while the second row contains the "learn more" section with full width.

<div class="well minitron">
    <div class="row">
      <div class="col-xs-2">
        <span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
      </div>
      <div class="col-xs-10">
        <div class="row">
          <span class="minitron-name">Some Name</span>
        </div>
      <div class="row">
        <span class="minitron-desc">A brief, meaningful description could go here.</span>
      </div>
  </div>

    <div class="row">
      <div class="col-xs-12">
        <button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
      </div>
    </div>
 </div>

*Update:

  • To increase the size of the glyphicon: Add style to the glyphicon span as "font-size:1.5em;"

  • To align it closer to the name and description, include style="text-align:right" in the glyphicon div container

  • The description is aligned with the name without using the original CSS styles.

  • To add more space between the learn more button and description/icon, adjust the top margin of the learn more div

Check out the new version here: https://jsfiddle.net/oh69hq71/18/

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

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

Which web browser(s) can properly display the CSS property display: run-in?

Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

Is there a solution to fix the issue with IE causing hover effects not to

I'm currently in the process of designing a website, and I have implemented some image hover effects that reveal elements within the image when you hover over it. These effects are functioning correctly on Chrome, Safari, and Firefox; however, they ar ...

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week) This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid. I attempted to change the background color using the fol ...

The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with: <div class="parent"> <div class"routeA"> <div class="header"> <li></li> <li class="p-highlight"></li& ...

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

Tips for inserting PHP information into the <link rel="stylesheet" type="text/css" href="CSS/sheet.css" /> reference tag

In my script, I have successfully implemented a feature that displays the OS and browser details. The output is in the form of eight CSS scripts, showcasing Mac, PC, and Ubuntu OS's with IE, Firefox, Safari, and Chrome browsers. While the script is st ...

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

When viewing my basic Bootstrap 4 webpage on a medium screen size, there appears to be a blank space on the right side. https://i.sstatic.net/ohV20.jpg Visit the page Thank you very much. ...

I can't get Toggleclass to switch classes properly, am I missing something?

I have been experimenting with creating a button that toggles a class and reveals another div below it. Feel free to check out the example on jsFiddle that I created for you. While the first function of showing and hiding the div is working perfectly, I ...

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

Creating dynamic div elements using jQuery

I used a foreach loop in jQuery to create some divs. Everything seems to be working fine, but for some reason, my divs are missing SOME class properties. Here is the code snippet I am using: $("#item-container").append("<div class=\"panel col-md-2 ...

Steps to incorporate the latest Material Design Bottom App Bar into your project

In our company, we are currently utilizing Vue and SCSS for constructing our latest Progressive Web Application. Depending on specific conditions relating to the user's profile, we need to switch out the left drawer with a Bottom App Bar. Although we ...

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this? <table> <tr style="background-color: red;"> ...

Achieving equal alignment of items with flexbox

As someone who is just starting to learn about HTML and CSS, I have been working on creating toggle buttons that I want to align dynamically in the center of the screen. I recently discovered flexbox which has made this process easier for me. However, one ...

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...