Having trouble positioning the content within the div

I'm currently working on an application using Vue.js and Bootstrap, and I'm trying to create a folder layout that looks like this:

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

Unfortunately, I'm having trouble aligning the content to match the image above. The current output looks like this:

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

Below is the code snippet I am using:

<div class="col-xl-3 col-md-6">
      <stats-card>
        <div slot="header" class="folderRectangle">
          <div class="row">
            <div class="col-3">
              <div class="clearfix">
                <i class="material-icons" id="folder-image">folder</i>
              </div>
            </div>
            <div class="col-9">
              <div class="clearfix" style="position: relative">
                <div>
                  <p style="text-align: left">Folder Name</p>
                </div>
                <div>
                  <p style="text-align:left">20 files</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </stats-card>
    </div>

Can anyone help me identify what I might be doing wrong? How can I ensure that the folder icon is aligned at the top and text floats to the center?

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Answer №1

To create the desired layout, you can avoid using .row and .col-*, and instead utilize Bootstrap's built-in media object.

/* demo only */

.media {
  border: 1px solid #ddd;
  padding: 1.5rem;
  margin: 1rem;
}

img {
  max-width: 25px; 
}

.media-body {
  font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="media">
  <img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
  <div class="media-body">
    <h6 class="mt-0 mb-1">Folder name</h6>
    <div>20 files</div>
  </div>
</div>

Answer №2

If you want to achieve your desired layout, the most effective method is to utilize the CSS Flex property.

  • Simply apply display flex to the parent element (col-9) in your specific scenario.
  • Set align items to center.
  • Lastly, align the flex items in a row format.

By following these steps, you will be able to create the design you envision.

To learn more about CSS flexbox, visit the link below: https://www.w3schools.com/css/css3_flexbox.asp

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

Using video instead of static slides in HTML5

I am interested in adding a video background with text overlay on my website, similar to what can be seen here: Although I understand it involves CSS, I am struggling to achieve the desired effect. Here is the code snippet I have been using: video#bgvid ...

javascriptjqueryhtmlcss

Align objects in two columns with varying heights properly

I'm trying to arrange items in two columns like Wallapop, but this is the best I've come up with so far: https://i.sstatic.net/1yBqJ.png Here is a JSFiddle link where you can edit the code: https://jsfiddle.net/52qdnLcg/ .parent { backgrou ...

htmlcssalignmentheight

Move the location of the mouse click to a different spot

I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...

javascriptcss

Stop unauthorized access to php files when submitting a contact form

I have implemented a contact form on my HTML page that sends an email via a PHP script upon submission. However, when the form is submitted, the PHP script opens in a new page instead of staying on the current page where the form resides. I have tried usin ...

javascriptphphtmljqueryforms

Clicking on a marker in Google Maps will display the address

I have a map that contains several markers, each designated by their latitude and longitude coordinates. I would like to be able to see the address associated with each marker when I click on it. However, I am currently experiencing an issue where nothing ...

javascripthtmlgoogle-mapsmapsreverse-geocoding

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...

htmlcsshtml-listsmultiple-columns

Developing a pagination element

I'm currently working on developing a pagination component. Let's say my API returns "pages": 9 For instance, if there are 9 pages to display, I want to limit the list to show only 5 pages and add three dots, as shown in the image. Is ...

vue.jsvuejs3

Adjust the span's width to make it shift position

Currently, I am in the process of learning HTML and there is a specific question that has come up for me. Within my <div class="input-group">, there are three elements: one span, one input field, and another span: <span class="input-group-addon q ...

htmlcsstwitter-bootstrap

Accessing the selected value from a dropdown list filled with data from a PHP array in HTML

My HTML and PHP code consists of a select dropdown that looks like this: <select name="category" id="_category" class="_cateogry" onchange="submitTheForm() > option value="">Please select</option> <?php foreach ($categories as $cont ...

javascriptphphtmleventsdom

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

javahtmlblackberry

How to Apply CSSResource to Customize a GWT Hyperlink

Hello, I am looking to enhance the visual appeal of my web application using GWT CSSResource. One thing that I am struggling with is styling a simple hyperlink. In traditional CSS, I would typically do the following: a{color: #somecolor} a:hover{color: ...

htmlcssgwthyperlink

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

javascriptjqueryhtmlcss

Step-by-step guide on visually comparing two iframes for differences

Scenario : In my project, I am dealing with 2 iframes that contain a significant number of divs and other controls, making both iframes similar in size to complete HTML websites. My goal is to compare these two iframes and identify any differences. Consi ...

javascriptpythonhtmlselenium-webdriveriframe

Issue with nested tabs functionality within a pill tab panel in Bootstrap not functioning as expected

I'm facing a challenge with integrating tabs into a vertical pill tab panel in Bootstrap 4. Below is a brief code snippet: <html> <head> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <script ...

htmlcsstabsbootstrap-4nav-pills

Capture the <html> element using jquery

Is there a way to target the <html> tag using jQuery? Below is my current code snippet: $('.btn').on('click', function() { $.post('/path/to/window.php', {id: $(this).data('id')}, function(res) { ...

javascriptjqueryhtml

Spacing between posts using CSS and jQuery

Currently, my code is creating a random number of new articles within the body of my webpage. I have successfully implemented different colors for each article, but I am encountering an issue with padding. Being new to web development, I am attempting to s ...

javascriptjquerycsshtml

How come Font Awesome icons aren't appearing in my link?

Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue. Sources I have tried: ...

htmlcssfont-awesome-5

What is the correct way to implement Vue.use() with TypeScript?

I am trying to incorporate the Vuetify plugin into my TypeScript project. The documentation (available at this link) suggests using Vue.use(), but in TypeScript, I encounter the following error: "error TS2345: Argument of type '{}' is not assign ...

typescriptvue.jsvuetify.js

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

htmlcsstwitter-bootstrap

What is the best way to display specific items in a bootstrap navbar by utilizing cookies with Python?

Below is the structure of my bootstrap navbar which is present in my base template: <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li>& ...

pythontwitter-bootstrapgoogle-app-enginegoogle-app-engine-python