search

Home  >  Q&A  >  body text

How to fix the gap between the image and the progress bar on a large screen using the Bootstrap Grid system?

Let me show you the idea of ​​this picture first: Picture (1) In this picture we see that in the md/lg screen, the progress bar is located below the picture and the text is on the right side of it.

In picture (2), in small screen sizes, the text is second and the progress bar is last:

What I'm trying to do is this code: 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon cv - </title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <!--main container-->
        <header>
            <h1>Bentouhami Faisal</h1>
        </header>

        <!-- Menu Navbar-->
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <a class="navbar-brand" href="index.html">Mon Portfolio</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="formation.html">Formations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="exprience.html">Expérience</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!--end Navbar-->

    <!--header container-->
    <div class="container">
        <div class="row row-cols-auto">
                    <!-- Picture -->
                    <div class="col-sm-12 col-md-3">
                        <img src="images/mon_cv_photo.jpg" alt="Photo de Portfolio" class="rounded-circle">    
                    </div>
      
                    <div class="col-sm-8">
                        <h2 class="intro-text"> 
                            <p><b> Développeur Full Stack</b></h2></p>
                        <p class="intro-text">
                                36 ans <br> tant que développeur Full Stack, je possède une expertise complète dans
                                la
                                conception, le développement et la maintenance d'applications web. <br> Avec une solide
                                formation en informatique de gestion et une passion pour la programmation, je suis
                                capable
                                de
                                gérer tous les aspects d'un projet, tant sur le plan front-end que back-end.

                                Grâce à ma maîtrise des langages de programmation tels que HTML, CSS, JavaScript, ainsi
                                que des frameworks populaires tels que React et Angular, je peux créer des interfaces
                                utilisateur attrayantes et réactives.<br>

                                En tant que Full Stack développeur, je suis également à l'aise avec les technologies de
                                développement back-end telles que Node.js et Python, ce qui me permet de créer des API
                                performantes et de mettre en place des architectures logicielles robustes. <br>Je suis
                                également
                                familier avec les concepts de déploiement et d'hébergement, et je peux travailler avec
                                des
                                outils tels que Docker et AWS pour assurer une mise en production fluide et sécurisée.

                                <br>En résumé, en tant que développeur Full Stack, je suis en mesure de concevoir,
                                développer et
                                optimiser des applications web complètes, offrant une expérience utilisateur
                                exceptionnelle
                                et
                                des fonctionnalités performantes. Je suis passionné par mon métier et je m'efforce
                                constamment
                                de rester à jour avec les dernières tendances et les meilleures pratiques du
                                développement
                                web.
                        </p>
                    </div>
                 </div>      
                    <!-- Progression bars -->
                    <div class="row">
                        
                    </div>
                    <div class="col-3">
                        <div class="row">
                            <div class="col-3">
                                <img src="images/java.png" alt="Java" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80"
                                        aria-valuemin="0" aria-valuemax="100">80%</div>
                                </div>
                            </div>
                        </div>

                        <!-- Compétence : C# -->
                        <div class="row">
                            <div class="col-3">
                                <img src="images/c-sharp.png" alt="C#" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70"
                                        aria-valuemin="0" aria-valuemax="100">70%</div>
                                </div>
                            </div>
                        </div>

                        <!-- Compétence : HTML -->
                        <div class="row">
                            <div class="col-3">
                                <img src="images/html-5.png" alt="HTML" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90"
                                        aria-valuemin="0" aria-valuemax="100">90%</div>
                                </div>
                            </div>
                        </div>

                        <!-- Compétence : CSS -->
                        <div class="row">
                            <div class="col-3">
                                <img src="images/css-3.png" alt="CSS" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
                                        aria-valuemin="0" aria-valuemax="100">85%</div>
                                </div>
                            </div>
                        </div>

                        <!-- Compétence : Bootstrap -->
                        <div class="row">
                            <div class="col-3">
                                <img src="images/bootstrap.png" alt="Bootstrap" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75"
                                        aria-valuemin="0" aria-valuemax="100">75%</div>
                                </div>
                            </div>
                        </div>

                        <!-- Compétence : Php -->
                        <div class="row">
                            <div class="col-3">
                                <img src="images/php.png" alt="Php" class="img-fluid">
                            </div>
                            <div class="col-9">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="70"
                                        aria-valuemin="0" aria-valuemax="100">75%</div>
                            
                            </div>
                        </div>
                </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
        </script>
        <!--end 1st container-->
</body>
</html>

Paint red where the progress bar should be.

The problem is when I'm in a big screen the text is too big and this creates a white blur between the picture and the progress bar pushing the progress line! Take a look at this screen:

P粉409742142P粉409742142487 days ago684

reply all(1)I'll reply

  • P粉518799557

    P粉5187995572023-09-15 00:28:55

    One way to implement this "grid system using Bootstrap" (actually, this is not exactly a grid system, but a flex system) is to place the progress bar twice in the code (once in the picture and once after the text) and show/hide them using the display utility class (v4 Documentation, v5 Documentation).

    There should be .d-none.d-md-block under the picture, and .d-block.d-md-nonecode>.# under the text. ## If you want them to swap at different breakpoints, change
    md to sm or lg. If you apply the default display of this element to "flex", replace
    *-block with the *-flex class.

    View it in action

    here.

    Alternatively, you can copy the text (instead of the progress bar) and apply the same technique.

    Comments:

    • The main disadvantage of this technique is that it makes it overly complex to apply/remove event listeners to repeated elements or their descendants.

      However, some front-end frameworks (Vue, React) provide built-in "portal" components that are essentially able to render their content within the target element and be placed at different locations in the DOM based on controller logic without losing events ( The elements are not destroyed, but moved). As far as I know, Angular doesn't provide this functionality out of the box. There may be a plugin for this, though.

    • If these three elements are all child elements of the same parent element, this layout can also be achieved using custom CSS, using

      display: grid on the parent element and defining grid -template-area (or grid-template-rows and grid-template-columns) responsive. But this means abandoning the Bootstrap grid system for that container and having to write your own CSS to control column widths responsively.

    • It's not clear from the sketch you made whether you want the text to be scrollable on mobile, with the image fixed to the top and the progress bar fixed to the bottom. This will undoubtedly create a problematic user experience. A better user experience on mobile devices is to make the entire page scrollable.

    • Your markup (HTML) is invalid: You closed the

      of the title prematurely, and you did not close all layouts

    • Other markup issues: Do not use

      inside a

      element (or vice versa); do not put multiple paragraphs in the same

      element, and avoid using the
      tag; never place       .row directly as another .row Child (you should wrap this in .col). And make sure your code passes HMTL validation.

    I have fixed everything mentioned in the example provided above.

    reply
    0
  • Cancelreply