"Discover the secrets to creating a stunning layout with the help of bootstrap's responsive

Here's what I have accomplished so far:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="row">

  <div class="col-xs-12 col-md-2"></div>


  <div class="col-xs-12 col-md-4 blog-post1">
    <img src="./assests/1.png" alt="" />
    <div class="overley-nav">
      <input type="button" value="Travel" />
      <h3>The Complete Guide for Travel in London</h3>
      <p>by MARIE NGUYEN / DECEMBER 13,2016</p>
    </div>
  </div>

  <div class="col-xs-12 col-md-4 blog">

    <div class="blogpost2">
      <img src="./assests/2.png" alt="" />
      <div class="overlay-nav2">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>
    <div class="blogpost3">
      <img src="./assests/3.png" alt="" />
      <div class="overlay-nav2">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>

  </div>



  <div class="col-xs-12 col-md-1"></div>
</section>

In the above code snippet, I've created a section within a row and allocated specific columns to the nested div elements using Bootstrap classes. However, I'm facing issues with the responsiveness of the images and text as I resize the browser window.

jqueryhtmlcssbootstrap-4

Answer №1

To ensure that the text remains aligned with the image, make sure to set the width of the container equal to the width of the image being used. Check out this example for reference.

If you prefer to have the image displayed below the text, simply place its containing div underneath the text. See an example here.

.overley-nav {
  width: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="row">

  <div class="col-xs-12 col-md-2"></div>


  <div class="col-xs-12 col-md-4 blog-post1">
    <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
    <div class="overley-nav">
      <input type="button" value="Travel" />
      <h3>The Complete Guide for Travel in London</h3>
      <p>by MARIE NGUYEN / DECEMBER 13,2016</p>
    </div>
  </div>

  <div class="col-xs-12 col-md-4 blog">

    <div class="blogpost2">
      <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
      <div class="overley-nav">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>
    <div class="blogpost3">
      <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
      <div class="overley-nav">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </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

Retrieving an array of objects from the database utilizing AJAX

I am trying to retrieve comments from a database and display them on my webpage. However, the current code is throwing a syntax error because the PHP file is not returning the JSON file properly. Here is a snippet of my PHP code (just the fetching part, n ...

phpjqueryajax

Tips for designing a CSS Grid that features a maximum width for the main content and a minimum width for the sidebar

I'm attempting to design a two-column CSS grid with a main content area that has a maximum width of 800px and a sidebar that has a minimum width of 200px: https://codepen.io/dash/pen/gOmXqGr The grid needs to be responsive: The yellow sidebar should ...

htmlcsscss-grid

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

Java's CSSSelector in Selenium WebDriver fails to deliver the desired value

When using the jQuery selector below: jQuery("html body div input[name='customer_name']").val(); I then created a selenium selector as follows: By cusNameTxtField = By.cssSelector("html body div input[name='customer_name']"); The fi ...

javajqueryselenium-webdrivercss-selectors

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Is there a way to call functions when a specific key is pressed along with the CTRL key (on a Windows system)? While testing for a particular keyCode, I used event.keyCode. I researched the codes assigned to each key and assumed that 17 + 73 would represe ...

javascriptjquery

Using ngModel to retrieve and display only the month, year, and date

Currently, I am working with an interface named Person which includes fields such as name, last name, birthday, and others. However, I am facing a confusion when it comes to the person's birthday format, as it contains some additional letters at the e ...

javascripthtmlangulartypescript

Issues with script execution on Ajax tab

I'm currently using JQuery UI tabs to load content through Ajax. I have a situation where two tabs are supposed to load HTML content and execute a script to hide or show certain elements in the loaded content. However, I encountered an issue where the ...

jqueryhtmlajaxtabs

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

javascripthtmlcssangulartypescript

Interactive search tool for toggling visibility of elements

Hello everyone, this is my initial post on StackOverflow. Keeping my fingers crossed that it goes smoothly! <input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></scr ...

javascriptjqueryhtmlcss

Merge two separate arrays to create a new associative array

I'm faced with the challenge of merging two arrays of data obtained from an HTML form. The first array (payment_descriptions) is structured as follows: ["1st Desc","2nd Desc","3rd Desc"] While the second array (payment_ ...

phphtmlarraysjsonlaravel

Easy selector for choosing jquery css backgrounds

Here is a simple background selector that I created. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

javascriptjquerycss

The JavaScript function is not functioning properly, whereas another function is working as intended

I have created a HTML form with 2 buttons and a table. Each row in the table consists of a checkbox and 2 text fields. The buttons allow users to add and remove rows from the table. The remove button only applies to rows where their checkbox is checked. T ...

javascripthtmlformshtml-tablerows

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

https://i.sstatic.net/LC5wq.pngWhenever I run the gulp serve command for my AngularJS Fuse project, I encounter this error. C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>gulp serve C:\wamp\www\bank_admin_post_log ...

htmlangularjsnode.js

Tips for addressing responsiveness issues in Bootstrap 4 column layout

Currently, I am working on creating a responsive profile page with Bootstrap 4. The challenge I am facing is that when viewed on smaller screens, the content shifts to the left while the center and right sections remain empty. This issue particularly affec ...

twitter-bootstrapcssbootstrap-4

Incorporating CSS styling dynamically using Javascript

Just a heads up - I am completely new to coding and JavaScript, and this happens to be my very first post, so please bear with me. I have a set of Hex codes representing various colors, and my goal is to utilize JQuery to style some empty divs in the HTML ...

javascriptjqueryhtmlcssarrays

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

javascriptjqueryhtmlajax

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

jqueryhtmlcss

I'm exploring the idea of invoking a JavaScript function in an HTML document after PHP validation and redirection. Currently, I'm attempting to tackle this issue

I have implemented an html form on my website. The form is utilizing a php file to handle sending emails, and upon successful submission, it redirects the user back to the original html form. Now, I am looking to incorporate a bootstrap success-alert that ...

javascriptphphttp-redirectbootstrap-4forms

Guide to establishing accurate $key=>$value connections in a JSON document using PHP or jQuery

Looking for assistance on reformatting my JSON file to transform a value within an array into the key for that array. Initial format { "ID": "M-420", "ProductName": "example product name ", "ProductDescription": "example description", "Co ...

phpjqueryjson

An animation triggered by scrolling using the @keyframes rule

Is it possible to smoothly animate a variable font using @keyframes on scroll and have it complete the animation loop when the user stops scrolling, rather than snapping back to the starting position? I've managed to make the animation work, but it l ...

javascriptjquerycss-animationskeyframeonscroll