The arrangement of components in Bootstrap

I have a total of 7 images that I need to display in a specific layout. The requirement is to show 5 images in one row and 2 more images in a centered row below. Although I was able to position the first row correctly, I am struggling with centering the second row of images below it. Additionally, when viewing the page in responsive mode, the images should appear stacked on top of each other with a border-radius of 100%. However, for some reason, this styling is not being applied correctly. Can anyone identify what might be wrong with my code? This is the HTML structure:

@media all and (max-width: 1024px) {
  .ring {
    border-radius: 100%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.1s" style="border-radius: 0;">
        <img src="img/1.jpg" style="border-radius: 100%;">
      </div>
    </div>
    ... (other image sections follow) ...
    
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="1.1s" style="border-radius: 0;">
        <img src="img/2.png" style="border-radius: 100%; width: 150px; height: 150px;">
      </div>
    </div>
    ... (more image sections follow) ...

</div>

Currently, I am utilizing Bootstrap 4 for this task. If there are alternative ways to achieve the desired layout without relying on Bootstrap, I would appreciate any suggestions or examples. Thank you.

htmlcssbootstrap-4responsive

Answer №1

Here is a demonstration code I created for you: https://codepen.io/tien-bui/pen/mamemO

The concept of Bootstrap is to have every row divided into 12 columns. If you want to display 5 items in one row, you would set the column prefix to 2. For instance, for small screens target col-sm-2, and for larger screens target col-lg-2. To make it responsive across all devices, you can use:

<div class="col-lg-2 col-md-2 col-sm-6 col-6"></div>

Answer №2

To create a responsive layout with flexbox, you can start by setting the width to 18%, which is slightly less than 20% and allows for displaying up to 5 items with some margin space.

For a different layout on smaller screens, use a media query to change the flex-basis to 48%.

.cont{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.item{
  flex-basis: 18%;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid black;
  height: 50px;
  margin: 5px;
}


@media all and (max-width: 1024px) {
  .item {
    flex-basis: 48%;
  }
}
<div class="cont">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</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

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

Firefox and Internet Explorer do not support the functionality of HTML5 <audio> tags

My radio stream player code works perfectly on Chrome and iOS Safari, but I'm facing compatibility issues with Firefox and Internet Explorer 11. Here's a snippet from my index.php file: <script type="text/javascript" src="http://code.jquery. ...

javascripthtmlinternet-explorerfirefoxhtml5-audio

What is the best way to dynamically update styleUrls or style properties in Angular?

One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this: Structure: component-one   folder-with-css-files     style-for-component-1-fo ...

cssangularstyled-components

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

javahtmlencodingutf-8character-encoding

How can I embed a PDF without displaying the toolbar and scrollbar? What could be causing this issue?

My code is not working properly as I can still see the scroll bars, toolbar, etc. <embed width="100%" height="900" src="T:\D\CODE1000.pdf#zoom=90&pagemode=none&scrollbar=0&toolbar=0&statusbar=1&messages=0&navpanes=0"/& ...

javascripthtmlpdf

quirky behavior of form inputs on mobile devices in a responsive webpage

I encountered a strange issue while developing a responsive webpage with form input. Whenever I tapped on an input field on my mobile phone to enter something, the screen would zoom in and cut off the text box on the left side, making it impossible to see ...

androidhtmlcss

The autoscroll feature of an overflow element does not persist when additional elements are added

I am in the process of trying to automatically scroll an element to the bottom of a overflow:auto div whenever a new message is added to a list through jquery using .append Initially, I managed to accomplish this with: $(".content-wrapper").scrollTop($(" ...

javascriptjqueryhtmlcss

Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle tr:nth-child(odd) td { background-color:red; } tr:nth-child(even) td { background-color:blue; } tr th { background-color: yellow} ...

htmlcss

Changing the Date Format in Reactive Forms: A Guide

I need to update the date format displayed in my field within Reactive forms. Currently, it shows as "16-03-1999" but I want it to display as "March 16, 1999." Here is the relevant code: In my TypeScript file: this.companyForms = this.fb.group({ }) I a ...

angulartypescriptbootstrap-4angular-reactive-formsng-bootstrap

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Converting a space-separated string into tags-input (treating each segment as a separate tag) in AngularJS

I need assistance with pasting a copied string into a tags-input element, like the example below: "[email protected] [email protected] [email protected] [email protected]": https://i.sstatic.net/0aFD5.jpg When I click outside of the tags-input element, I ...

javascripthtmlangularjs

Tips for locating and interacting with a specific element using Selenium

I am delving into the realm of Python and honing my skills by creating practical applications for daily use. I recently embarked on automating a routine task, but hit a roadblock when attempting to utilize selenium to click on a specific element that dynam ...

pythonhtmlseleniumselenium-webdriverxpath

A guide to crafting a cross design using only CSS

Is it possible to create a cross design in pure CSS that overlaps an image inside a div? Or would I need to create a new image with the cross included? ...

htmlcss

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

javascripthtmltwitter-bootstrapangular

Selecting Images with HTML and JQuery

Every time I click on an image, the text "Window Image" appears instead of the image itself. This is the code where I want to replace the image: <div class="product"> <img id="model" src="images/casement.png" alt="Window Image" /> ...

jqueryhtmlimage

Determine the number of images displayed in each row using Rails

I have successfully created a gallery in Rails by generating a separate div for each image URL stored in the database within my view. I am now looking to implement a feature that allows users to specify the number of pictures per row and rows per page on t ...

ruby-on-railsbootstrap-4lightboximage-gallery

My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...

htmlcssindexingstylesheet

Navigating through dropdown menus using webdriver

I am having trouble selecting a specific element from a dropdown menu. The element I am trying to select is labeled Edit/ViewResume 1st Attempt For my initial try, I attempted to use the Action and Select class methods to choose the desired webelement ...

javahtmlseleniumdrop-down-menuselenium-webdriver

How to use Nokogiri to efficiently extract targeted nodes from HTML

In my Ruby script, I am trying to extract specific values from an HTML document using the Nokogiri gem. The HTML content I'm parsing includes information about a user and their registered device. #!/usr/bin/ruby require 'Nokogiri' doc = No ...

htmlrubyxpathhtml-parsingnokogiri

Disable the appearance of the scrollbar while maintaining the ability to scroll

Is there a way to hide the scrollbar on the body of an HTML page while still allowing scrolling with arrow keys or mouse wheel? I would appreciate any advice on this. Edit: I have received suggestions about using hover scrollbars and custom bars, as well ...

javascriptjqueryhtmlcss