Create columns with responsive layouts that can accommodate multiple groups of images and paragraphs

Question

Create columns with responsive layouts that can accommodate multiple groups of images and paragraphs

Multiple divs with images and another group of divs containing p tags (only numbers) come together to create an odontogram. This structure, consisting of a set of teeth along with their corresponding numbers, fits within a column that is 8 units long. Moreover, this entire setup is enclosed in a bootstrap card. Each image is housed inside its respective div.

If you want to see the complete code, you can visit here. Additionally, here is a preview:

<div class="row">
<div class="col-md-8 odontograma">
    <div class="card">
        <div class="card-body">
            <br>
            <div class="pieceRow1">
                <p class="pieza18" id="pieza18">18</p>
                <p class="pieza17" id="pieza17">17</p>
                <p class="pieza16" id="pieza16">16</p>
                <p class="pieza15" id="pieza15">15</p>
                <p class="pieza14" id="pieza14">14</p>
                <p class="pieza13" id="pieza13">13</p>
                <p class="pieza12" id="pieza12">12</p>
                <p class="pieza11" id="pieza11">11</p>
                <p class="pieza21" id="pieza21">21</p>
                <p class="pieza22" id="pieza22">22</p>
                <p class="pieza23" id="pieza23">23</p>
                <p class="pieza24" id="pieza24">24</p>
                <p class="pieza25" id="pieza25">25</p>
                <p class="pieza26" id="pieza26">26</p>
                <p class="pieza27" id="pieza27">27</p>
                <p class="pieza28" id="pieza28">28</p>
            </div>
            <div class="fila1 d-flex justify-content-center">
                <div class="pieza18" id="img18"><img class="diente18" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>
                <div class="pieza17" id="img017"><img class="diente17" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                // More similar div structures here...
            </div>
        </div>
    </div>
</div>

I attempted applying the 'img-fluid' class to the images but it resulted in them being small and unresponsive. Is there any way to make the number-image combinations responsive within the column using bootstrap or CSS?

html css image bootstrap-4 responsive

Answer 1

Answer №1

If you're looking to create an Ontogramm using HTML and CSS without relying on graphics or images, a grid layout can achieve that effect. However, for the grid to display correctly, it will need a minimum width of 720px. Below this threshold, issues may arise due to sizing constraints. Ideally, the grid should automatically adjust to different screen sizes and expand to its full width independently.

body {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  grid-auto-rows: auto;
  grid-gap: 2px;
  padding: 2px;
  text-align: center;
}

div {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

<body>
  <!-- 1st Row -->
  <div>18</div>
  <div>17</div>
  <div>16</div>
  <div>15</div>
  <div>14</div>
  <div>13</div>
  <div>12</div>
  <div>11</div>
  <div></div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div> 

  <!-- More Rows with Content Here -->

</body>

Answer 2

If you're looking to create an Ontogramm using HTML and CSS without relying on graphics or images, a grid layout can achieve that effect. However, for the grid to display correctly, it will need a minimum width of 720px. Below this threshold, issues may arise due to sizing constraints. Ideally, the grid should automatically adjust to different screen sizes and expand to its full width independently.

body {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  grid-auto-rows: auto;
  grid-gap: 2px;
  padding: 2px;
  text-align: center;
}

div {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

<body>
  <!-- 1st Row -->
  <div>18</div>
  <div>17</div>
  <div>16</div>
  <div>15</div>
  <div>14</div>
  <div>13</div>
  <div>12</div>
  <div>11</div>
  <div></div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div> 

  <!-- More Rows with Content Here -->

</body>

Create columns with responsive layouts that can accommodate multiple groups of images and paragraphs

Answer №1

Similar questions

Invalid chunk type detected in createimagefromstring function

Prevent the influence of other page styles on a div element

Integrating information from various sources to create a cohesive online platform

Swap a jQuery class with another if the class for ul li is currently active

Place a div box beneath another div box that is absolutely positioned, without requiring knowledge of its height

What is the best way to align inline-block elements in a straight row?

Change the color of all the text on a page to a designated shade

Preventing blank text entries in a task management application

Webpack struggles with handling css using the css-loader when trying to implement (react)-css-modules

Having trouble centering an icon in a cell within AG Grid?

Transitions fail to appear correctly when the page first loads

How can CSS animations be implemented on a diagonal path?

AngularJS routing that is tailored to form input

Text area with a set height and expandable max-height - scrollable overflow

Change the button text without the need for a click, automatically switch

In Internet Explorer 7, a newline within a <pre> tag may cause display issues

Design an interactive div element that allows users to modify its content, by placing a span

Tips for ensuring that 3 divs fill the height of their parent container

The iPad1 is having trouble displaying the background image, while the iPad2 is showing it perfectly

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands