The content within the bootstrap card is not displaying correctly in its entirety

The alignment of the '.card-text' within my row of bootstrap cards is not correct. I attempted to adjust the spacing for '.card-text', but unfortunately, it did not resolve the issue. Below is the code snippet:

HTML:

<!DOCTYPE html>
<html>
<head>
           <link rel="stylesheet" href="/stackoverflow/1/css.css"/>
           <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829d829f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>

<div id="skills_container">
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/html.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">HTML</h5>
                        <p class="card-text">Basic and complex HTML tags for different uses.</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/css.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">CSS</h5>
                        <p class="card-text">Knowledge in CSS displays, Responsive design and animations</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/cambridge.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">B1 Cambridge English</h5>
                        <p class="card-text">Cambridge B1 Degree English Level.</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/js.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">Javascript Client Basics</h5>
                        <p class="card-text">Basic usage of js in client</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/python.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">Python Basics</h5>
                        <p class="card-text">Knowledge in basic uses of python</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/marketing.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">Analytics and Markeing</h5>
                        <p class="card-text">Analytics and Digital Marketing knowledge.</p>
                      </div>
                    </div>
                  </div>

</body>
</html>

CSS:

#skills_container{
    width:96vw;
    display:flex;
    overflow-y: hidden;
    overflow-x:auto;
    white-space:nowrap;
    padding:1rem;
    border:1px solid;
    border-radius:1rem;
  }
  
  .card{
    display:inline-block;
    margin:0 2px;
  }
  
  /* .card-text{
    
  } */

To view the hosted site directly, visit:

htmlcssbootstrap-4horizontal-scrolling

Answer №1

Give this a try

#skills_container{
    width:96vw;
    display:flex;
    overflow-y: hidden;
    overflow-x:auto;
    white-space:nowrap;
    padding:1rem;
    border:1px solid;
    border-radius:1rem;
  }
  
  .card{
    display:inline-block;
    margin:0 2px;
  }
  
.card-body{
        white-space: normal;
  }
<!DOCTYPE html>
<html>
<head>
           <link rel="stylesheet" href="/stackoverflow/1/css.css"/>
           <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>

<div id="skills_container">
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/html.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">HTML</h5>
                        <p class="card-text">Basic and complex HTML tags for different uses.</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/css.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">CSS</h5>
                        <p class="card-text">Knowledge in CSS displays, Responsive design and animations</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/cambridge.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">B1 Cambridge English</h5>
                        <p class="card-text">Cambridge B1 Degree English Level.</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos`-index/optimizadas/js.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">Javascript Client Basics</h5>
                        <p class="card-text">Basic usage of js in client</p>
                      </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/python.webp" class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">Python Basics</h5>
                        <p class="card-text">Knowledge in basic uses of python</p>
                      </div>
                    </div>
                       <div class="card" style="width: 18rem;">
                      <img src="/img/fotos-index/optimizadas/marketing.webp" class="card-img-top" alt="...">
                      <div class="card-bo to the clipboard
                        <h5 class="card-title">Analytics and Markeing</h5>
                         <p class="card-text">& Analytics and Digital Marketing knowledge.</p>
                      </div>
                    </div>
                  </div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing just the portion of an element that moves underneath a fixed see-through navigation bar

After extensive searching for a solution, I have encountered multiple similar issues but none have provided a resolution that works for my specific case. It seems I may be overlooking something obvious. The problem at hand involves a fixed transparent nav ...

jqueryhtmlcssnavalpha-transparency

"Is it possible to create a single-page website with a unique logo for each div

Is it possible to have a unique logo on each section of my single-page website? Each section has its own div. Check out my website at . Thank you in advance! ...

javascriptjquerycss

CSS - Unchanging absolute unit across all devices

After reading through this particular inquiry, it became evident that a pixel does not qualify as an absolute unit—a fact that I have validated through practical experience. Despite experimenting with pt, cm, and mm, I have yet to discover a definitive ...

htmlcss

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...

javascripthtmlcssreactjstypescript

Issues with displaying Bootstrap 5 second toast notifications

Hey there, I'm facing an issue with getting the second toast to display properly. Here is the HTML: <div class="toast-container position-fixed bottom-0 end-0 p-3"> <!-- FIRST --> <div class="toast" role="aler ...

javascripthtmlbootstrap-5

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

javascripthtmlcss

Tips for transferring data when clicking in Angular 5 from the parent component to the child component

I need assistance with passing data from a parent component to a child component in Angular 5. I want the child component to render as a separate page instead of within the parent's template. For example, let's say my child component is called & ...

angularhtmltypescript

Center-align text points on a webpage using a bootstrap theme

Using the bootstrap creative theme, I am attempting to create a list of points with the md-bootstrap check fa icon. Here is how it currently appears: https://i.sstatic.net/7cgbG.jpg My goal is to center the text on the page while aligning the start of e ...

htmlcssbootstrap-4

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

javascripthtmlgoogle-chromecachingvideo

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

javascripthtmlangularjs

How to retrieve the row index from a table using JavaScript

This question has cropped up numerous times, and despite trying various solutions suggested before, none of them seem to be effective in my case. Within a modal, I have a table where users can make changes that are then used to update the database. The ta ...

javascriptphpjqueryhtmlmysql

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

htmljquerycssyoutubeyoutube-api

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Moving DOM Elements around

Objective: Looking to relocate an element within the DOM structure. Condition: Although I am familiar with using jQuery for this task, I am currently working in an environment without access to it. Therefore, I need a pure JavaScript solution. Example: ...

javascripthtml

Using fit-content with dynamic font size in CSS: How does it work?

Let's take a look at this div element : <div style=" text-align : center; font-size : min(calc(var(--fp-title-font-ratio-h) *100vh),calc(var(--fp-title-font-ratio-w) *100vw)); color ...

htmlcss

Is it time to swap out those divs for tables in your email template?

I have set up my template like this and I am questioning whether I should replace every div with a table. Let's start with the first div in the example. Do I really need to create a new table element, followed by tr and td tags just for a banner? I u ...

htmlemail

Ways to center text horizontally in a line with the help of bootstrap styles?

.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...

cssvue.jsbootstrap-4