Tips for creating responsive images in a Bootstrap template

I have done my research and tried numerous solutions, but I still can't get two images and a text to display in one line. The problem is when I shrink the window size, the images end up above and below the text instead of beside it. I have included the code snippet below along with a fiddle: 

<div class="row">
   <div class="col-md-4">
     <img src="image.jpg" class="images">
   </div>
   <div class="col-md-4">
     <div class="text">
       <h2 class="featurette-heading">What's Included with HTML?</h2>
          <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
    </div>
</div>
  <div class="col-md-4">
    <img src="image.jpg" alt="Chrome Browser" class="images"></div>
</div>

Does anyone know how I can make the images resize based on the window size so they all appear in a single line with the text?

I've experimented with width:100%;height auto;, max-width:100%;, and various other combinations to make them responsive, but nothing has worked.

Any help would be greatly appreciated!

htmlcssimagetwitter-bootstrap

Answer №1

To adjust the grid column size, switch from md to xs (col-md-4 : col-xs-4).

For more information, refer to the Documentation.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
    <div class="col-xs-4">
      <div class="text">
        <h2 class="featurette-heading">What's Included with HTML?</h2>

        <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
      </div>
    </div>
    <div class="col-xs-4">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
  </div>
</div>

Answer №2

Make sure to include the .img-responsive class when adding an image. This will automatically set the image's properties to 

max-width: 100%;, height: auto; and display: block;
, allowing it to adapt well to its container.

For further details, check out: http://getbootstrap.com/css/#images

Answer №3

attempt to substitute with .col-xs-12 within the image division

Answer №4

To center the images, you can use the class "col-sm-4 col-xs-12" on the div and the img-responsive class on the images. Additionally, add a style attribute display:inline-block to the img tag.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-12"">
      <img class="img-responsive"  style="display:inline-block" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
    <div class="col-sm-4 col-xs-4">
      <div class="text">
        <h2 class="featurette-heading">What's Included with HTML?</h2>

        <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12"">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive"  style="display:inline-block" />
    </div>
  </div>
</div>

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

Adjusting elements in Material UI without distorting them

Struggling with resizing a select component from material UI led to some unexpected challenges. Despite attempting to adjust the size using the className property, the label ended up misaligned and the selection shade appeared larger than the select box it ...

cssreactjsmaterial-uifrontendreact-typescript

How can I activate div elements by clicking on a specific div using Angular 2?

I have created a custom component with search dropdown functionality for selecting dates. <div class="search-dropdown calender-dropdown "> <div class="search-dropdown-tabs-wrp"> <ul class="search-dropdown-tabs"> <li& ...

cssangulartypescript

Is there a way to transfer multiple functions using a single context?

Having created individual contexts for my functions, I now seek to optimize them by consolidating all functions into a single context provider. The three functions that handle cart options are: handleAddProduct handleRemoveProduct handleC ...

javascriptjavahtmlcssreactjs

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

Is there a way in CSS to only display a background image if it can be fully shown without setting the width in pixels? I want to avoid showing partial background images. Is there a CSS property that can help with this? [] <div align="left" style="pad ...

htmlcss

Why do my buttons exhibit varying colors despite being assigned identical classes?

Creating a user-friendly interface for a news application, I designed six buttons, with two of them in blue (btn-primary) while all have the same classes. For the full code, click here https://codepen.io/tarekhassab/pen/Oojdgw?editors=1010 &l ...

twitter-bootstrapbootstrap-4

Unable to retrieve the unprocessed value (including periods) from an HTML number input

Whenever I press a key on the <input type="number" id="n" /> and then type a ., it appears in the input but does not show up in $('#n').val(). For instance, if I type 123., the result from $('#n').val() is just 123. Is there a w ...

javascriptjqueryhtml

The visual symbol is not being shown on the selection box in Mozilla Firefox

I've encountered an issue with a checkbox I created to display a + and - for expand and collapse functionality. HTML Code: <input type=checkbox class="ins" ng-model=show ng-class='{open:show}'><b>Show</b> CSS code: .ins ...

javascripthtmlcssangularjsfirefox

The amazing magnific popup boasts a pair of close buttons

I recently started working on integrating a front-end HTML theme with a back-end Laravel app. Oddly enough, I noticed that the popup modal is displaying two close x buttons instead of just one. Despite my efforts, I have been unable to pinpoint what exactl ...

javascripthtmlcssmagnific-popup

A guide to handling a dynamic form with vue.js

Currently, I am working on implementing a filter option on my website where the options are dynamically loaded from the database. Due to this dynamic nature of the options, using a typical v-model approach seems challenging. The filter includes various pa ...

javascripthtmlvue.jsvuejs2

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

javascriptjqueryhtmlslideup

Problem with Nodejs loading of images and scripts

After getting back into Nodejs, I'm experiencing some initial setbacks. I'm attempting to set up a static page, with JavaScript and images loading from different folders using basic Nodejs and ejs. The root folder with the index.js loads and dis ...

node.jsimageloadejs

Strange Behavior When Floating Right in Chrome

There's a strange issue that I'm facing, only in Chrome. It seems to be adding some extra space on top of an element with float: right, but only when the browser window is resized (you can see how the name then shifts under the header): This pro ...

htmlcssgoogle-chrome

Align the final row to the left in a flexbox that is centered

My issue involves a flexbox containing NxN squares. I need the container to adjust to fit as many squares as possible within the display width, while also center-aligning the flexbox on the page. The problem arises when I set the CSS property: justify-con ...

htmlcssflexbox

issue with manipulating URLs in Express routing

Looking for assistance with Express routing. I want users to only see localhost:3000/page2 when they go to /page2, instead of localhost:3000/page2.html I have three HTML pages - page1.html, page2.html, and page3.html. I've created a server using Expr ...

javascripthtmlexpressroutespath

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

css

Looking to retrieve a specific data element within Vue.js?

Here's a thought-provoking query for you. Imagine I have some data stored in an element in the form of an array like this: data: { product: socks, variants: [ { variantId: 2234, variantColor: 'Green', varian ...

javascripthtmlcssvue.js

submitting image data from HTML5 canvas using an HTML post request

I am having issues sending canvas data to the server side as an image. Despite making an HTTP post request, I am unable to retrieve the data on the server side. $_POST remains empty, even though I can see the image data when console logging the object on t ...

phpjavascripthtmlhtml5-canvas

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Currently, I am facing a challenge in animating an emoticon that was initially sketched on canvas. While following a tutorial to implement draw and clear animations using frames, I haven't been able to achieve the desired outcome. With 6 frames of the ...

javascriptjqueryhtmlanimationcanvas

Set up a listener to detect changes in fullscreen mode for the specified host

How can I determine if the fullscreen mode is active using the HTML5 fullscreen API with Chrome and Angular 4.x? I have developed an Angular component and included the following @HostListener: @HostListener('document:webkitfullscreenchange', ...

javascriptangularjshtmlfullscreenaddeventlistener

Javascript unable to update the DOM

I've been working on a project to prototype a simple functionality using JavaScript for learning purposes. However, I've encountered an issue where the contents within the <p> tag are not updating, and I'm currently stuck. Here's ...

javascripthtmlajaxdominnerhtml