Ensuring Bootstrap Cards (version 4.4.1) Blend Seamlessly with Body Text for a Cohes

https://i.sstatic.net/Dqywt.png

I have implemented a card similar to the one displayed on my homepage, but I would like it to be aligned left and take up less horizontal space. Additionally, I want the text to wrap around the card rather than being completely separated, as shown in the image below.

https://i.sstatic.net/dpIAL.png

Here is the current code for the card. I am unsure whether the changes need to be made in the HTML or the .css file.

<div class="col-md-4 text-center offset-4">
  <div class="card">
    <div class="card-body">
      <img src="images/960px-Reality_check_ESA384313.jpg" width="250" height="180" alt="Man Wearing VR Headset" />
      <hr>
      <p> Researchers with the European Space Agency in Darmstadt, Germany, equipped with a VR headset and motion controllers, demonstrating how astronauts might use virtual reality in the future to train to extinguish a fire inside a lunar habitat. </p>

      <a class="nav-link" href="tech1.html">Learn More About VR Tech</a>

    </div>
  </div>
</div>

htmlcsstextbootstrap-4bootstrap-cards

Answer №1

Consider using the float-left class on your image for a different layout.

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

Using custom CSS with Bootstrap 4 and Rails 5: A simple guide

Currently I am working with Bootstrap 4 and Rails 5, and have chosen to use render :layout => false in order to exclude my main app layout from the login page. The login page is styled with Bootstrap, and I have incorporated some custom CSS from a Boots ...

ruby-on-railsbootstrap-4

Display a div using ASP.NET when a button is clicked

I am currently attempting to display a loading div when a button is clicked, however, I am encountering some issues with the functionality. Javascript : <script type="text/javascript"> $(document).ready(function (e) { $(&a ...

c#javascriptasp.nethtml

Creating an HTML file with a Windows-inspired icon and file name design using CSS

I searched everywhere on the internet but couldn't find a solution. If anyone knows of a similar link to my question, please share it with me. I am trying to achieve a design similar to Windows icons and file names in HTML using CSS. Please refer to ...

htmlcss

Customize HTML template with unique data fields

Hey everyone, I'm trying to create a template html file and customize certain data within it. I've been looking for ways to achieve this and the only solution I came across is shown below: <div w3-include-html="tmp1.html"></div> ...

javascripthtml

Steps for extracting a portion of the current page's URL

Can someone help me extract a specific part of the current URL using JavaScript? The URL looks something like this: I need to isolate the number "3153038" from the URL and store it in a JavaScript variable. Thank you! ...

javascripthtml

Section of links spanning 4 columns in full-width

Planning to design a 4 column link section for an upcoming website, aiming to achieve the look in the provided screenshot. https://i.sstatic.net/pydBp.png Each box will serve as a clickable link, changing color on hover. Utilizing the Bootstrap framework ...

htmlcssbootstrap-4background-image

Guide on interpreting unordered lists and returning the outcome to Java

The xhtml-file provided below showcases a structure for content creation: <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" temp ...

javajavascripthtmljsf

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

While browsing, I stumbled upon this interesting piece of JavaScript code: onClick="self.location.href='http://stackoverflow.com/'" I incorporated this code into my website, and it seems to have the same effect as using the href attribute. Sin ...

javascripthtmlonclickhref

Selenium XPath: Locating element containing specific text or alternate text

Is it possible to locate an element with XPath using two text strings as criteria? The element may contain either text A or text B, and I need to verify that the element is visible based on this condition. Is there an XPath expression like "//*...[contains ...

c#seleniumxpathtext

"Exploring the implementation of mute event in Audio HTML5 using JavaScript within an MVC

I am searching for an event that triggers when the mute button is pressed. The volumechange event only works when the volume is adjusted. <audio id="volumeController" onvolumechange="changeVolume()"controls> <source src="~/Sounds/be ...

javascriptc#asp.net-mvchtml

Hey there, I'm curious about a couple of things related to CSS

Seeking assistance as a newcomer to website creation. I am struggling with linking all my HTML pages to a single CSS sheet. The desired border effect can be seen in the image here: https://i.sstatic.net/Ojwuh.jpg The code snippet shows attempts to achieve ...

htmlcssweb

Issue with $_FILES and $_POST data being empty during file uploads

There's a strange phenomenon I've observed when uploading videos - sometimes the $_POST and $_FILES array is completely empty. It's happened with a few of the videos I've tested, all of which are in the video/mp4 file format. <!DOCT ...

phphtmlmultipartform-data

The issue with negative margin-right is not functioning as expected on Chrome's browser

Hello everyone! I'm having some trouble cropping an image using another div. I've noticed that the margin properties -left, -top, and -bottom are working fine, but for some reason the margin-right isn't cooperating on Chrome. Do you have any ...

htmlcssgoogle-chromemargin

What is the best way to position an element on top of a section of a massive image using CSS?

My current project involves creating a demo of my app within the app itself. To give you an idea, check out the images below: https://i.sstatic.net/J4gbS.png https://i.sstatic.net/OAmwK.png Let me provide some context. The large black rectangle represe ...

htmlcssreact-nativeflexbox

What is the reason for CSS to be included in the installation process when running npm install with [someLibraryName

After executing the following command: npm install vue-material I noticed that it installed and replaced some of the css styles in my application, leading to conflicts. To resolve this issue, I had to manually search for the specific piece of css and ove ...

cssvue.jsnpmwebpackvue-material

Tips for creating a React Table where one element spans the entire cell

Hello, I am trying to make my td element tag occupy the entire cell belonging to that column. The current output I have is shown in this screenshot: https://i.sstatic.net/erPJC.png Essentially, I want the "Independent Study" to take up the first column. H ...

javascripthtmlcssreactjs

Adding extra spacing to a bootstrap container the correct way

Scenario: Increasing padding in container view sketch Hello there! I am currently using bootstrap scss in typo3 and having ws_scss compile it for me. I feel like the content area needs more padding to make it slightly smaller. Here are some basic details ...

bootstrap-4sasstypo3paddingscss-mixins

Utilize the design elements stored in the database within Django

I have a style stored in my database and I want to use it in a template, but I'm not sure how to do it. models.py class Post(models.Model): # ... body = models.TextField() # HTML style = models.TextField() # CSS # ... views.py ( ...

pythoncssdjango

"Employing the ScrollSpy feature in Bootstrap allows you to effortlessly monitor

Recently, I came across a document containing Bootstrap 4 code like the following: <div className="container"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand active" aria-current="true" href="/"> ...

javascriptcssbootstrap-4scrollspy

Accessing data from multiple related tables in CodeIgniter: Displaying data from two connected

I am currently using CodeIgniter for a project. In the "v_pembayaran_admin" page, there is a table named "pembayaran" which includes a column called "nama_user". The data for the "nama_user" column is sourced from the "pendaftar" table but is accessed thro ...

phpmysqlbootstrap-4phpmyadmincodeigniter-3