0

enter image description here

Hi, I have a scenario in which i want to make the above view. I am using Bootstrap4 and I know I can achieve this by using either display:flex or display:inline-block. Now I really wanna know which to use when ? What's the best practice ?

Right now i am doing something like this.

.job-details-container {
  display: flex;
}

.job-details-container .job-details-type {
  width: 15%
}
<div class="job-details-container">
    <div class="job-details-type">Id</div>
    <div class="job-details-content">0234</div>
</div>

    

4
  • if you use bootstrap 4 use row and col then you do not have to worry about dispaly type Commented Jan 31, 2019 at 8:08
  • 1
    your data is in table form, just use a table. Commented Jan 31, 2019 at 8:30
  • 1
    I would simply use a table because your data is in table format, If it was one line vertical or horizontal then i would use flex with flex-wrap Commented Jan 31, 2019 at 9:14
  • I also suggest to use the table or bootstrap row col. Commented Feb 1, 2019 at 4:51

1 Answer 1

1

Well, this is essentially a table. So I suggest using HTML tables. The cells will stretch automatically just like with flex. Tables are fully supported back to IE 8.

.job-details {
  border-collapse: collapse;
  width: 80%;
  margin: auto;
}

td, th {
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 10px;
}
<table class="job-details">
  <tr>
    <td>Id</td>
    <td>0234</td>
  </tr>
  <tr>
    <td>Service Type</td>
    <td>Move</td>
  </tr>
  <tr>
    <td>Schedule</td>
    <td>11:00 am, Jan 1, 2019</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Change to flex if you want to create layouts and complex designs. For displaying simple text or maybe some images, tables are your friends.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.