Bootstrap Why text doesn't change line properly

The text doesn't change line properly, I thought it should run in the column and auto change to next line, so they are stay in the column. That's what I saw in the video but is not working.

Thanks for helping.

Here are pictures. https://ppt.cc/fr1JQx , https://ppt.cc/fPDr2x

Here is my code.

<style type="text/css">
    .item:first-letter{
        font-size: 50px;
        float: left;
    }
    .item{
        background-color: rgb(62, 116, 163);
    }
    
</style>
    
  </head>
  <body>
    <div class="container">
        <div class="row g-5">
            <div class="col-3  mb-4" >
                <div class="item h-100  width-10">
                    A abcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcd</div>
            </div>
            <div class="col-3  mb-4">
                <div class="item h-100">
                    B abcdabcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcdabcd             
                </div>
            </div>
            <div class="col-3  mb-4">
                <div class="item h-100">
                    C abcdabcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcdabcdabcdabcd
                </div>
            </div>
            <div class="col-3  mb-4">
                <div class="item h-100">
                    D abcdabcdabcdabcdabcdabcdabcd
                    abcdabcdabcdabcdabcdabcdabcdabcd</div>
                
            </div>
        </div>
    </div>

Solution

Two options to fix:

I found this answer which explains in a bit more detail, but if this is really your content (I doubt it) you need to add this to your CSS:

word-wrap:break-word;

Otherwise I've slightly tweaked your layout and added some real content:

<div class="container">
    <div class="row">
        <div class="col-3 mb-4">
            <p class="h-100 item">
                A This is some normal text. I don't know the difference?
            </p>
        </div>
        <div class="col-3 mb-4">
            <p class="h-100 item">
                B You need to use a normal paragraph structure, testing testing testing testing          
            </p>
        </div>
        <div class="col-3 mb-4">
            <p class="h-100 item">
                C abcdabcdabcdabcdabcdabcdabcd
                abcdabcdabcdabcdabcdabcdabcdabcd
                abcdabcdabcdabcdabcdabcdabcdabcd
            </p>
        </div>
        <div class="col-3 mb-4">
            <p class="h-100 item">
                D abcdabcdabcdabcdabcdabcdabcd
                abcdabcdabcdabcdabcdabcdabcdabcd
            </p>
        </div>
    </div>
</div>

You can see that the columns with garbage content are still broken, but the ones I changed work fine.