Guide on aligning text content alongside image in a row using bootstrap

I'm looking to achieve a specific layout in Bootstrap where the display changes based on whether an image is present within a row.

When there is both an image and text content, I want the image to occupy a column size of 4 while the text content sits adjacent in a column size of 8. enter image description here

If the image is absent, I'd like the text content to take its place in the layout.

<div class="container ">
    <div class="row ">
        <div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-md-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>

Can someone guide me on how to implement this?

htmlcssbootstrap-4

Answer №1

Make sure to include the align-items-center class in the parent div. Here is the code snippet:

<!doctype html>
<html lang="en>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">>
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425e425c410e09180d5d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">>
  </head>
  <body>
    <div class="container ">
    <div class="row align-items-center">
        <div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bda6baa6b8a5eaedfce9b9">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

Answer №2

To center align all items, use the class align-items-center in the parent div. Here is an example:

If you need to remove an image and keep the items centered based on a specific height, add a style with the desired height.

<!doctype html>
<html lang="en>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <body>
    <div class="container ">
    <div class="row align-items-center">
        <div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

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

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

Guide on customizing the checkbox label class upon @change event in Vue?

Query: I have a list of checkboxes connected to an array of names. The objective is to alter the class of a specific name when its checkbox is clicked. Issue: Clicking on a checkbox causes all names to change class, instead of only affecting the one ass ...

javascriptcssvue.js

Setting the default attribute to all tags in JavaScript using HTTP

I am currently learning HTML and trying to understand how things work... One thing I am struggling with is setting the target attribute for all links on my webpage so they open in a new tab... I have been experimenting with jQuery functions, but so far, ...

javascriptjqueryhtmlattributestags

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how ...

htmlcssbootstrap-5

Utilizing the jQuery .wrap() method to encase the surrounding HTML

I am currently using the following jQuery code: jQuery( ".quantity" ).wrap( "<div class=\"engrave_button\"></div>" ) to wrap the quantity div with the engrave_button div. However, I need to include the ...

htmljquery

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Is there a way to extract all the data values starting with "data-" from the selected input fields in HTML5 and compile them into an object?

Looking for a way to automate input values: <input class="form" type="checkbox" name="item1" data-value="{ 'item1':'selected', 'price': 100 }" checked="checked"> <input class="form" type="checkbox" name="item2" data- ...

javascriptjqueryhtml

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

javascriptjqueryhtmldjango

Appearance with grey background color instead of transparency

After attempting to remove the background-color attribute, I noticed that the background remains a shade of grey instead of becoming transparent. Here is the code snippet: CSS: #contact-form button[type="submit"] { position: absolute; width: 100 ...

htmlcss

I seem to have encountered a design issue with a form I am working on. Something seems amiss as the lower edges are not aligning properly

I am facing an issue with the design of a form. The lower edges are not aligned properly. What could be the cause of this problem? <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label col-form-label-lg">CIDR-S ...

htmlcssbootstrap-4

Bidirectional binding of attributes in an Angular directive

I have developed a custom Angular Directive known as evoEventMirror. Its main purpose is to attach a jQuery event to an inserted element and apply a specified CSS style to the "root" element. Refer to the example below: <div id="#mydiv" evo-event-mirro ...

jquerycssangularjsbindingangularjs-directive

Steps for displaying a post's image when hovering over its link in WordPress

One section of my website displays the latest 6 posts, and here is the HTML code for it: <div class="latest-posts"> <div id="latest-posts-title"> <p>Latest Posts</p> </div> <div id="latest-posts-pictures" ...

javascriptphphtmlcsswordpress

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

Guide to updating a SQL value via a button click using PHP

Unsure of the amount of code required for my project, so any guidance is appreciated! I am currently working on the admin-end of a PHP project that utilizes SQL. The admin has the ability to update, remove, and promote normal users to administrators (some ...

javascriptphphtmlsql

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

Can a panel defined in index.html be used on another page, such as results.html? Or do I have to define the panel on every page and duplicate the HTML code on each page? Because I want the panel to be consistent across all pages. This is the panel in my ...

javascriptjqueryhtmlcssjquery-mobile

Having trouble customizing a particular view within Angular

I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...

javascripthtmlcssangularjs

What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...

cssreactjssassjsx

Accessing Firebug in Selenium webdriver is a straightforward process that involves downloading and

Seeking guidance on how to approach a requirement using Selenium webdriver as I am new to it. The requirement entails: Select the note icon to open a 'note' pop up. Then, open Firebug within the pop-up. Access the script option in Firebug, se ...

javascriptjavahtmlselenium

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle