Designing adaptive images with text in Bootstrap's grid system

https://i.sstatic.net/HIGDH.png

I am in the process of designing a layout similar to the one shown above on the top of my webpage. Utilizing Bootstrap 4, I have structured the rows and columns accordingly.

        <div class = "row">
          <div class = "col-sm-2"> </div>
          <div class = "col-sm-1" > Image placeholder</div>
          <div class = "col-sm-1" > Image placeholder </div>
          <div class = "col-sm-8"></div>
        </div>

        <div class = "row">
          <div class = "col-sm-2"> </div>
          <div class = "col-sm-1"> <!-- -->  </div>
          <div class = "col-sm-5">
            <div class="row">Title Text here </div>
            <div class="row"> Additional text here </div>
          </div>
          <div class = "col-sm-4"></div>
        </div> `

The main challenge I face is determining the image sizes. I aim for them to preserve a specific aspect ratio and adjust size proportionally for smaller displays. Fixing column sizes and trying to fit images within hasn't yielded desired results. Altering image dimensions itself leads to protrusion from the grid. Additionally, is there a method to control the wrapping point for a column's size?

htmlcssbootstrap-4

Answer №1

Below is the code snippet:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid img-responsive">
    <div class="row">
      <div class="col-sm-2 col-xs-2"></div>
      <div class="col-sm-1 col-xs-1">
        <img src="1.jpg" class="img-responsive">
      </div>
      <div class="col-sm-1 col-xs-1">
        <img src="2.jpg" class="img-responsive"></div>
      <div class="col-sm-8 col-xs-8"></div>
    </div>

    <div class="row">
      <div class="col-sm-2 col-xs-2"></div>
      <div class="col-sm-1 col-xs-1"><img src="3.jpg" class="img-responsive"></div>
      <div class="col-sm-5 col-xs-5">text goes here</div>
      <div class="col-sm-4 col-xs-4"></div>
    </div>
  </div>

</html>

            <script src="" async defer></script>
    </body>
</html>

You can add images and view the outcome See the fiddle for a demo:https://jsfiddle.net/tyu867tk/

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

Creating content inside a list

When aiming for semantic code, I am currently debating the best way to write text within a list item. Should it be done as follows: <li> <p>This is my text</p> <p>This is another bit of text</p> </li> or <l ...

htmlhtml-lists

Django and Bootstrap4 threw an error, stating that "mysqlclient version 1.4.0 or above is needed, but you currently have version 0.10.0."

After successfully using Django 3.1.2 with MySQL for my database, I decided to install Botstrap 4 (via pip install bootstrap4) and included it in my Template {% load bootstrap4 %}. Suddenly, I encountered an error stating: django.core.exceptions.Improperly ...

pythonmysqldjangobootstrap-4

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Utilizing IcePDF or PDFBox for converting PDF files into HTML web pages

I am interested in extracting content from PDFs using either IcePDF or PDFBox. However, I am unsure of how to proceed with converting the extracted text and images into HTML web pages. ...

htmlpdfpdfboxicepdf

The functionality of Dompdf's style does not seem to be functioning properly

I've been experimenting with dompdf and while my script successfully generates a PDF document, the style tag seems to have no effect. Here's my code. I'm familiar with how it operates and have used it with pure HTML before, but this is my fi ...

phpcssdompdf

Encountering a ng build issue with the bootstrap min file when running with the --prod flag

After executing the command ng build it appears that everything is functioning properly. However, when trying to run ng build --prod An error message was encountered: ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: B ...

angularbootstrap-4angular-cliangular5

Is it possible to locate the storage location of your CSS class in WordPress using the Chrome DevTools?

I need to switch the positions of two tabs on my product page: https://i.sstatic.net/L7xcC.png The Learn More tab should be in place of the Specification tab, but I am having trouble locating the class. I have searched for the class in the style.css fil ...

csswordpress

Extract the content from a widget on a different site

How can I eliminate the specified text shown in the image? https://i.sstatic.net/174fD.png This widget is sourced from an external website. Is it possible to use javascript to wrap a around the text and then remove it using css? It's important to ...

javascriptcsstext

It's impossible to center text in Bootstrap 5

Creating a website for my school project has been challenging, especially when it comes to centering text. I have been struggling to position the text in the middle of the background picture despite trying various methods. Here is the HTML code: pastebin ...

htmlcssbootstrap-5

The Bootstrap hamburger menu icon (3 horizontal bars) fails to display when the browser is resized

The issue I'm facing is that the three-bar "hamburger menu" doesn't appear when I resize the browser. While the collapsed menu is functional upon clicking, it's essentially an invisible white box. I've meticulously compared my code to B ...

twitter-bootstrapbootstrap-4

Navigate through the API results and showcase

Looking to showcase data from this API: I want a view that presents the information in an organized manner. To achieve this, I need to loop through the articles array. How can I replicate the content of the API in my views? Currently, only news related ...

jqueryhtmlapi

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml

Remove a row from one table by selecting a cell in a different table

I have a situation where I have two different tables side by side: one with only one column and the other with multiple columns. My goal is to be able to delete a row in the multi-column table by clicking on a cell in the single-column table that correspon ...

javascriptjqueryhtml

How can I resolve the issue of React not identifying the prop on a DOM element?

Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell i ...

cssreactjsstyled-componentsreact-props

Why does my console refuse to log the input entered for the search?

Looking to become proficient in web development, I am attempting to record HTML search queries in the console after storing them in a variable. However, when I try running the search procedure, nothing seems to be displaying in my browser's inspect co ...

javascripthtml

What is the best way to get three columns of images to align in a single row?

I'm currently working on setting up a portfolio section for a website I am developing using Bootstrap. Unfortunately, I've run into an issue where the third item in my lineup keeps jumping to the next line and I can't figure out how to fix ...

htmlcssweb

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...

csshtml

Optimizing responsiveness and side margins for high-resolution displays

Struggling with creating a website design with Bootstrap. My goal is to add margins on the sides when the screen size increases, but once I achieved it, the responsiveness of the page got disrupted. To incorporate the side margins, I enclosed the entire b ...

csshtml

Despite Firefox blocking the submit event, the jQuery submit event will still execute

Within my form, I have a text field that is designated as type="url". Before the submission process in Firefox, it appears to validate whether the URL input is correct. If an invalid URL is detected, the submission will not proceed. However, even if the fo ...

jqueryhtmlformsfirefoxsubmit