0

I have a list where it has title and secondary description besides an image icon. I want to middle align the text and image icon as

enter image description here

as

enter image description here

<!doctype html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

<body>
    <ul class="list-group">
        <li class="list-group-item">
            <div class="btn-group float-end">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                <ul class="dropdown-menu dropdown-menu-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
                    <li><a class="dropdown-item" href="#">Delete</a></li>
                    <li><a class="dropdown-item" href="#">Run</a></li>
                </ul>
            </div>
            
<img src="https://img.icons8.com/color/48/000000/networking-manager.png"/>            
A First item<br/>
<small class="text-secondary">This is a first item description</small>
            <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body"> What is Lorem Ipsum? </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    
</body>

</html>
kmoser
  • 8,780
  • 3
  • 24
  • 40
Code Guy
  • 3,059
  • 2
  • 30
  • 74

4 Answers4

1

Please try this:

<!doctype html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
        
        <style>
        .header-intro-section {
            /* display: flex; if you want to show full width, please use it */
            display: inline-flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        </style>
</head>

<body>
    <ul class="list-group">
        <li class="list-group-item">
            <div class="btn-group float-end">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                <ul class="dropdown-menu dropdown-menu-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
                    <li><a class="dropdown-item" href="#">Delete</a></li>
                    <li><a class="dropdown-item" href="#">Run</a></li>
                </ul>
            </div>
            <div class="header-intro-section">
            <img src="https://img.icons8.com/color/48/000000/networking-manager.png"/>            
            A First item<br/>
            <small class="text-secondary">This is a first item description</small>
            </div>
            <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body"> What is Lorem Ipsum? </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    
</body>

</html>
Md. Delowar Hossen
  • 561
  • 3
  • 7
1

Move the <img> to the first child of the <li> and add a class of float-start to it:

<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />

<!doctype html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

<body>
    <ul class="list-group">
        <li class="list-group-item">
            <img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />            

            <div class="btn-group float-end">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                <ul class="dropdown-menu dropdown-menu-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
                    <li><a class="dropdown-item" href="#">Delete</a></li>
                    <li><a class="dropdown-item" href="#">Run</a></li>
                </ul>
            </div>
            
A First item<br/>
<small class="text-secondary">This is a first item description</small>
            <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body"> What is Lorem Ipsum? </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    
</body>

</html>
kmoser
  • 8,780
  • 3
  • 24
  • 40
  • Thank you very much, but the gap between image and the title desc has to be reduced. I applied the class https://prnt.sc/LucDs1yV-2t0 but it didnt. Could you help me know where it has to be added? – Code Guy Nov 03 '22 at 06:49
  • @CodeGuy If you want to *reduce* the padding, why are you trying to *add* more with `pe-5`? – kmoser Nov 03 '22 at 19:31
  • https://stackoverflow.com/questions/74311651/add-gap-in-bootstrap-between-image-and-text here is the post. – Code Guy Nov 04 '22 at 02:49
1
    <hello name="{{ name }}"></hello>
    <p>
      Start editing to see some magic happen :)
    </p>
    
    <!doctype html>
    <html lang="en">
    
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    </head>
    
    <body>
        <ul class="list-group">
            <li class="list-group-item">
                <div class="btn-group float-end">
                    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                    <ul class="dropdown-menu dropdown-menu-lg-end">
                        <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                        <li><a class="dropdown-item" href="#">Run</a></li>
                    </ul>
                </div>
                
    <img style="float:left;" src="https://img.icons8.com/color/48/000000/networking-manager.png"/> 
    /*DIV for title and description*/           
    <div style="float:left;" >
    A First item<br/>
    <small class="text-secondary">This is a first item description</small>
    </div>
                <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-fullscreen">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body"> What is Lorem Ipsum? </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
        </ul>
        
    </body>
    
    </html>

The main part of solution is putting title and secondary description into div and assigning this image and div as `"float:left"`
Diksha
  • 246
  • 2
  • 13
  • Thank you very much, but the gap between image and the title desc has to be reduced. I applied the class prnt.sc/LucDs1yV-2t0 but it didnt. Could you help me know where it has to be added? – Code Guy Nov 03 '22 at 06:49
  • Can you please check with my solution again ? It has already very less space between image and the title desc. If you need to decrease more than I'll tell you – Diksha Nov 03 '22 at 07:42
  • I want to do it by adding a bootstrap class and not inline styles. – Code Guy Nov 03 '22 at 08:48
0

I see you are using bootstrap 5 cdn so try out this with flex, you have use float that is not an issue but you also need to clear the float while using it (What does the CSS rule "clear: both" do?) so better to use flex. Here is my solution for your problem using flex.

<!doctype html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item">
            <div class="d-flex flex-wrap align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <img class="img-fluid" src="https://img.icons8.com/color/48/000000/networking-manager.png" alt="img" />
                    <div class="d-flex flex-column">
                        <div>A First item</div>
                        <div><small class="text-secondary">This is a first item description</small></div>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Action
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" data-bs-toggle="modal" href="#exampleModalToggle"
                                role="button">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                        <li><a class="dropdown-item" href="#">Run</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>

    <!-- Edit Modal -->

    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
        tabindex="-1">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body"> What is Lorem Ipsum? </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-bs-target="#exampleModalToggle2"
                        data-bs-toggle="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
Patel Harsh
  • 109
  • 4