Changing the size of images in a Bootstrap framework

As a beginner in html, css, & bootstrap, I am facing an issue with an image that has a class of card-img-top. I can't understand why it doesn't maintain the pre-defined height of the col-sm-4 when I insert my image sized at 339x508. It seems to increase in height compared to others. Below is the code snippet:

        <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/fashion.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card_title">Fashion</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/entertainment.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                  <h5 class="card_title">Entertainment</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
htmlcssbootstrap-4

Answer №1

.image-height
   {
     height: 300px;
   }

This is how you can adjust the height of your picture.

Answer №2

<div class="col-lg-6">
        <div class="card" style="margin-bottom: 5em;">
            <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Technology</h5>
                <p class="card-text">This is some example text to showcase the card content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card" style="margin-bottom: 5em;">
            <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Travel</h5>
                <p class="card-text">This is some example text to showcase the card content.</p>
            </div>
        </div>
    </div>

delete margin property from cards.

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

I have just started a new project in Vue and noticed that the app div has some extra margin around it. Can anyone

In my fresh Vue project, I have the following code: App.vue: <template> <div id="app"> <p>hello</p> </div> </template> <script> export default { name: 'App', components: { } ...

htmlcss

Can a website be saved entirely, including the initial HTML page, and accessed without an internet connection?

Our unique website utilizes AJAX technology to communicate with the server without making additional page requests after the initial setup. This allows users to seamlessly switch between online and offline modes during a session, automatically synchronizin ...

javascripthtmlajaxcachingoffline

What is the best way to ensure that python code executes correctly when triggered by a button click that also includes an alert action?

I've been struggling to make alerts work alongside a URL call in response to pressing an HTML button. To elaborate, I have a button that triggers a URL call which leads to executing some Python code for playing a video from my URLs.py and views.py fil ...

javascriptpythonhtmldjango

Implementing jQuery code to increase the height of a Text Area dynamically

I have a situation where my asp textbox and label are appearing as a text area: <div class="control"> <asp:TextBox runat="server" Rows="2" ID="TextBox1" Width="80%" EnableViewState="false" ViewStateMode="Disabled" CssClass="textboxBootstr ...

jqueryhtmlcss

Safari rendering issue causing mat-sidenav-container CSS to malfunction

I am encountering an issue with my mat-sidenav-container. While my code functions correctly on IE, Chrome, and Firefox, it appears broken only on Safari. The app-header should be fixed at the top, but it does not display as expected. I believe this error i ...

cssangularsafariangular-materialandroid-flexboxlayout

Dynamic varying size image gallery

Hey there! I've been trying to make this https://codepen.io/junedc/pen/yqXVaR responsive, but I'm having trouble. When I remove the height or change it to a percentage, the image disappears. <div class="gallery-height"> <div class="img" ...

htmlcssflexbox

Create a row that has a centered heading and a button aligned to the right using Bootstrap 4

I'm currently working with Bootstrap 4 and React. I'm attempting to centralize a h4 heading while also aligning a couple of buttons to the right, all within the same row. The issue I'm facing is that the h4 heading is only centered within th ...

cssreactjstwitter-bootstrapbootstrap-4

What is the best way to position text and an image at the top of a webpage using floating techniques?

Despite it being a simple task, I seem to complicate things... I'm looking to have a banner right at the top of my page, immediately following the <body> tag. This banner will consist of left-aligned text and a right-aligned image. The goal is ...

css

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

htmlcssbootstrap-4

Impact of Jquery on dropdown menus in forms

Currently, I have a script for validating form information that adds a CSS class of .error (which includes a red border) and applies a shake effect when the input value is less than 1 character. Now, I also need to implement this validation on various sel ...

javascriptjquerycssforms

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

javascriptjqueryhtmlajax

Watching mov and mp4 files directly in your web browser

I am currently experimenting with the HTML5 video tag and database video files. In my database, I have several records that contain both mov and mp4 files. While HTML5 video tag supports mp4 files, it's a different story when it comes to mov files. I& ...

phphtmlvideoffmpeg

How can I customize the color of the border/background on my jquery menu?

I have been using the jquery function menu() to generate a menu, and it's working as expected. However, there is one aspect that I would like to customize: the white border around the menu button should be black instead. You can see what I mean by ...

jquerycssmenubackground-color

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

javascripthtmlfunctionvariables

Utilizing HTML5 for page-relative translation

Is there a way to apply a translate to an element so it moves to a specific point on the page instead of relative to its starting position? For instance, in the code snippet below, the "card" elements will move 50, 100 relative to their initial position. ...

javascriptcsshtmlwebkithtml5-animation

Is there any difference between keeping JavaScript at the bottom of the page versus including it in the <head> tag inside document.ready?

Would it make a difference if I place my JavaScript code at the bottom of the page versus inside <head> within document.ready? I'm torn between these two approaches, referenced here: http://api.jquery.com/ready/ and http://developer.yahoo.com/p ...

javascriptjquerycssperformancexhtml

How to use puppeteer to extract images from HTML that have alt attributes

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1">&l ...

javascripthtmlnode.jspuppeteer

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

javascripthtmlcss

Is it possible to automate the process of clicking the "next" or "previous" button on a webpage after a video has finished playing?

Is it possible to automate clicking the "next" or "previous" button on a specific website? The buttons are not labeled as such but instead show the cartoon name and episode number. For example, increasing episode numbers indicate the "next" episode while d ...

pythonhtmlseleniumautomation

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui