I'm experiencing challenges with the layout of an HTML document

I am looking to create individual boxes for each of these images, rather than coloring the entire row.

One approach I've tried is using a div tag with a class called "caja-img" that specifies a specific width.

HTML

<div class="col-md">
    <div class="contenido">
        <div class="caja-img">
            <img src="img/icon1.png" alt="Autogestion">
        </div>
        <h3 class='text-center'>Facil y seguro!</h3>
    </div>
</div>

CSS

.caja-img {
    background-color: red;  
 }

What I want to achieve is to only color the image itself, not the entire row it is in.

htmlcssbootstrap-4

Answer №1

To customize the appearance of all images within a specific division, you can use the following CSS code:

.image-box img{
    border: 1px solid black;
}

This code targets all image elements nested inside the .image-box class for styling.

Answer №2

To make the element with the class name .caja-img appear as inline-block, you can add the CSS property display: inline-block.

Here's an example of the code:

.caja-img {
  background-color: red;
  display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="contenido">
    <div class="caja-img">
      <img src="img/icon1.png" alt="Autogestion">
    </div>
    <h3 class='text-center'>Facil y seguro!</h3>
  </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

Show Picture from directory

Trying to showcase images stored in the source folder of my project has been quite a challenge. When attempting to display them using <img src="Image.png" alt="Displaying Image"> All I see is the alt text instead of the actual image. Even switchi ...

htmlasp.net

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

Is it possible for CSS hover to have an impact on multiple divs that share the same class name

There are 5 divs on the page, all with the same class name as shown below: Here is the CSS: .test:hover{ color:red; } And here is the HTML: <div class="test"></div> <div class="test"></div> <div class="test"></div> ...

htmlcss

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui

Struggling with adding a border to an HTML table?

I am attempting to create a table with alternating borders on the cells. After trying the code below, I still can't seem to get the desired effect. The borders are not showing up at all. Can someone provide guidance on how to achieve this? <style ...

htmlcsshtml-table

Can you provide tips on identifying children with the same Kineticjs type?

Having a problem with Kineticjs, here is my code: var G1=new Kinetic.Group() var sq=new Kinetic.Rect({ x:0, y:0, name:"sq" }) var line1=new Kinetic.Line({ Points:[0,0,10,10], name:"line1" }) var line2=new Kinetic.Line({ Points:[0,0,50,50], name:"line1" ...

javascripthtmlkineticjs

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

Require a selection from the menu on the right side needed

I am looking to have the logout link displayed on the far right when the other menu items are hidden. Currently, it is appearing in the center. Is there a way I can make it show up on the right? <div class="nav-content container"> &l ...

htmlcssasp.net

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

javascripthtmlangularjsangularjs-directive

Transitioning the <mat-icon> from one <mat-form-field> to another may not always result in the icon being updated consistently

Being new to Angular, I have been working on creating a form for blog posting and I am trying to include selectable category icons next to the title. In my current setup, I have made a form with selectable font awesome icons. However, I am facing an issue ...

javascripthtmlangularangular-fontawesome

Identifying added elements that respond to link hover effects

I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...

javascriptjquerycsssvg

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

htmlcss

Is it possible to utilize :not in this scenario?

<ul class="promocode"> <li>one</li> <li>two</li> <li class="three">three</li> </ul> Is there a way to use :not in order to apply a hover effect to the entire list, except when hovering ov ...

css

Highlighting of tab CSS is not persistent when switching tabs or clicking elsewhere on the page

Using Bootstrap 4, a navigation tab is created. However, upon loading the page, the home tab is automatically loaded but not highlighted. Clicking on any tab will highlight it correctly, but once clicked anywhere else on the page, the highlight disappears. ...

htmlcssbootstrap-4tabs

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

javascripthtml