Question 186725 in Html Question posted in
Some basic documentation can be found here.

Html – How to display icon and content next to each other without using bootstrap?

I have this HTML that displays icons on the left, and summary on the right. I wrapped the icons and the summary using a bootstrap class col-sm-3 col-md-3. I did this because I wanted to display only four icons per row.If there are more than four icons, then the icons need to move the next row. I put the summary in col-sm-3 col-md-3 class because I want the text to be next to the icons.

However, I no longer want to use bootstrap, so I am looking at ways to achieve what I want with just CSS.

Here is the HTML:

<div class="coreStuff"> 
    <div class="col-sm-3 col-md-3">
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
    </div>  
    <div class="col-sm-3 col-md-3">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div>

I think I got it to partially work with CSS grid, but let’s say there is only one icon, or two icon, in that case this CSS won’t work because it creating a wide gap between the icon(s) and the summary. Is there a way to make the summary responsive and dynamically adjust with respective to the icons?

CSS:

.theIcons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.theSummary{
    width: 25%;
}
Tags:

2

Answers


  1. 0

    Hope this helps.

    <div class="coreStuff"> 
    <div class="icons">
        <i class="fa-solid fa-globe">1</i>
        <i class="fa-solid fa-globe">2</i>
        <i class="fa-solid fa-globe">3</i>
        <i class="fa-solid fa-globe">4</i>
        <i class="fa-solid fa-globe">5</i>
        <i class="fa-solid fa-globe">6</i>
        <i class="fa-solid fa-globe">7</i>
        <i class="fa-solid fa-globe">8</i>
        <i class="fa-solid fa-globe">9</i>
    </div>  
    <div class="summary">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div

    CSS :
    (the borders are just to give visual feedback, you can style as per your needs. Also, you might have to tweak the solution based on your own design and layout)

    .icons, .summary{
  border: 1px solid red;
}

.coreStuff { 
  display: flex;
/*  you'll probably want to give some fix width  */
  width: 30em;
}

.icons i {
  border: 1px solid red;
/*   height: 30px; */
/*   width: 30px; */
}

.icons{
  display: grid;
  grid-template-columns : repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  flex-basis: 30%;
/*   gap: 0.5em; */
}
.summary{
  flex-basis: 70%;
}
    Login or Signup to reply.
  2. 0

    Do you mean there is an icon for each summary? If that is true you have to change your HTML to be like this

    <div class="coreStuff"> 
<div class="box">
<i class="fa-solid fa-globe"></i>
<p>your summary </p>
</div>

    and your css It could be like this :

    .coreStuff{
display:flex;
flex-wrap: wrap;
gap:1%
}
.box{
width:24%
display:flex;
gap : 10px ;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search