Twitter Bootstrap Question posted in

How to arrange nested divs next to each other using inline block or flex-Twitter bootstrap

How to arrange nested divs next to each other using inline block or flex

I have 3 elements in my html.

One icon, and two text elements.

I want the icon to be on left and then the text on top of each other.

I am trying to do this using following html and css, which works partially. The icon is way down and I tried moving it up. More over , I think there is a better and right way of doing this.

body {
  background-color: #D2D5DD;
}

.auto-complete-box {
  display: inline;
  margin-top: -20px;
}

.auto-complete-tag {
  margin-top: 15px;
  margin-left: 5px;
  display: inline-block;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div>
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">HeaderValue</div>
    <div class="tag-description">Item description</div>
  </div>
</div>

<div>
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">Header 2 </div>
    <div class="tag-description">Item description</div>
  </div>
</div>

Edit:
The divs are aligned and the icon also aligned to the div(s) on right side , probably by using stretch.

enter image description here

Tags:

3

Answers


  1. 0

    Use display:flex to wrap div and remove unnecessary code(inline/inline-block)

    body {
  background-color: #D2D5DD;
}
.wrap{
display:flex;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrap">
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">HeaderValue</div>
    <div class="tag-description">Item description</div>
  </div>
</div>

<div class="wrap">
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">Header 2 </div>
    <div class="tag-description">Item description</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Maybe this way: 

    .wrap{
display: flex;
align-items: center;
}
    Login or Signup to reply.
  3. 0

    Another simpler method to use when trying to align components in HTML is to make use of the table structure. Sometimes aligning of certain components don’t work when using CSS because there might be a conflicting style element.

    So a method I prefer using to ensure that my components are perfectly in line, is to encapsulate them in a table. In your case, put the icon and text element into 2 separate columns within a single row as shown in the code snippet below:

    I hope this helps! 🙂

    body {
  background-color: #D2D5DD;
}

.auto-complete-box {
  display: inline;
  margin-top: -20px;
}

.auto-complete-tag {
  margin-top: 15px;
  margin-left: 5px;
  display: inline-block;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<table>
<tr>
    <td>
        <div>
            <div class="auto-complete-box">
            <i class="fa fa-bars"></i>
        </div></div>
        </td>
        <td>
        <div class="auto-complete-tag">
            <div class="tag-header">HeaderValue</div>
            <div class="tag-description">Item description</div>
        </div>
   </td>
   <tr>
   <td>
       <div>
           <div class="auto-complete-box">
           <i class="fa fa-bars"></i>
       </div></div>
       </td>
       <td>
       <div class="auto-complete-tag">
           <div class="tag-header">Header 2 </div>
           <div class="tag-description">Item description</div>
       </div>
       
   </td>
</tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search