CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvue.jsbootstrap-4
CoderPJ
CoderPJ

Reputation: 1011

Unable to align div content

I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:

enter image description here

But, I am unable to align the contents to make sure that it looks like in the above picture.

The picture currently looks like this:

enter image description here

Here is the code:

<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>

What wrong am I doing? How do I make sure that the folder icon aligns to the top and text floats to the center?

Upvotes: 1

Views: 77

Answers (2)

Mrinal Jain
Mrinal Jain

Reputation: 927

The best possible way to achieve what you are trying is to use CSS Flex property.

  • Just give display flex to the parent (col-9) in your case.
  • Provide align items to be center.
  • and at last flex alignment to row.

this will make you achieve the above design

You can read about CSS flexbox more here https://www.w3schools.com/css/css3_flexbox.asp

Upvotes: 0

Ana Liza Pandac
Ana Liza Pandac

Reputation: 4861

Instead of using .row and .col-*, you can use the media object already available in Bootstrap to produce this layout.

/* 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>

Upvotes: 4

Related Questions