Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout?

I experimented with grid layout using 

<div class="span2">
and 
<div class="span10">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet>


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2 ">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
    </div>
    <div class="span10">
      <h5> This is a Course Name </h5>
      <p>This my course description </p>
      <span>[Professor Name]</span>
      <span id="hours">[Total hours]</span>
      <p> Total Hours</p>
      <span id="stud-nbr">[Number Of Students]</span>
      <p> Students</p>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star"></span>
      <span class="fa fa-star"></span>
      <a href="#" class="btn button-highlight">Start!</a>

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

https;//jsfiddle.net/IhebEddin/ryb4ude5/2/

htmlcssbootstrap-4

Answer №1

Try implementing the d-flex class as it aligns well with bootstrap.

For more information, refer to: Flex - Bootstrap

.span2,
.span10 {
  border: 1px solid #ccc;
  padding: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container-fluid">
  <div class="d-flex align-items-stretch">
    <div class="span2">
      <img src="http://lorempixel.com/300/160/sports/">
    </div>
    <div class="span10">
      <h5> This is a Course Name </h5>
      <p>This my course description </p>
      <span>[Professor Name]</span>
      <span id="hours">[Total hours]</span>
      <p> Total Hours</p>
      <span id="stud-nbr">[Number Of Students]</span>
      <p> Students</p>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star"></span>
      <span class="fa fa-star"></span>
      <a href="#" class="btn button-highlight">Start!</a>

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

To ensure equal height, consider using the align-items-stretch class and add borders for clear visualization.

Answer №2

One useful technique to consider is employing flexbox layout. Here's an example:

.row-fluid{
  display:flex;
}

Answer №3

If you are utilizing bootstrap, consider incorporating the media object. By including media, mr-3, and media-body, you can achieve the desired style. Refer to the bootstrap documentation for more details on how to use it: Bootstrap Media

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div class="media">
  <div class="mr-3">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
  </div>
  <div class="media-body">
    <h5> This is a Course Name </h5>
    <p>This my course description </p>
    <span>[Professor Name]</span>
    <span id="hours">[Total hours]</span>
    <p> Total Hours</p>
    <span id="stud-nbr">[Number Of Students]</span>
    <p> Students</p>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <a href="#" class="btn button-highlight">Start!</a>

  </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

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

htmlcsstwitter-bootstrapbootstrap-5

Slick Slider - Defining the Initial Slide

My website features a dynamic carousel showcasing a basketball team's schedule, with games sorted by date for the current season. I am trying to align the slider to display the upcoming game at the center. How can I designate a specific slide as the ...

javascriptjqueryhtmltwitter-bootstrapslick.js

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

csstypescriptnext.jshyperlinkcard

Issue with exporting VueJS-generated HTML containing checkboxes results in loss of checkbox checked state

In the template of my component, I have a checkbox code that looks like this: <div ref="htmlData"> <input type="checkbox" class="mycb" :id="uniqID" :disabled="disabled" v-model="cbvalue" > &l ...

htmlcheckboxvue.jsvue-component

Eliminating gaps between elements

I recently delved into the world of web design, and although I have a basic understanding of HTML and CSS, I am determined to enhance my skills and knowledge by creating a standard home page. So far, I managed to create a standard navigation bar, and now ...

htmlcsstwitter-bootstrap

how can a select dropdown be dynamically displayed based on the previous selection?

If the first dropdown is set to "Professor" I want to display a second dropdown, but if it is set to "Student" then I do not want to display the second dropdown. function checkPrivilege() { var privilege = document.getElementById("permisija5").value; ...

javascripthtmlfunctionselectdrop-down-menu

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

javascripthtmlbrowsercross-browser

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

htmlcss

The jQuery AJAX variable was successfully sent via a POST request, but unfortunately, I am unable to access it in PHP

Objective: The goal is to trigger a jQuery AJAX request when clicking on a table cell (td). This request will send the corresponding reservationid via a POST method to the same page containing the clicked td. In the PHP file, a query will be executed to f ...

phpjqueryajaxbootstrap-4

The JavaScript slideshow fails to display an image during one rotation

The slideshow displays a sequence of images from pic1.jpg to pic8.jpg, followed by a 4-second pause with no image, and then repeats starting again at pic1.jpg. I am looking to have it loop back to pic1.jpg immediately after displaying pic8.jpg. Below is t ...

javascripthtml

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Responsive Image Resizing with Bootstrap for Smaller Screens

I'm struggling to resize a responsive image in Bootstrap using the carousel example on their official website. <div class="container"> <div class="other-div"> .... </div> <div id="carouselExampleCon ...

csstwitter-bootstraptwitter-bootstrap-4

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Is there an h1 heading on this page?

Trying to enhance the accessibility of a website by properly setting up the headers. Running into issues with ensuring they are in the correct order. If there is code that could be applied across all pages to set h1 if it doesn't exist (promoting h2, ...

javascripthtml

Tips for scaling and compressing a canvas image using only pure javascript and HTML5 techniques

I am currently working on resizing and rotating a camera picture on the client side without using any special libraries. I have successfully completed most of the task, but I encounter an offset of 320 pixels when rotating the image. The source of this off ...

javascripthtmlcanvas

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...

javascripthtmlvue.jsvuetify.js

Navigating up and down effortlessly using bootstrap

My webpage has a collapsible form located near the bottom, but when it's opened users must scroll down to see all of it. Is there a way to automatically scroll down when it's opened and then scroll back up when closed? Take a look at my code: & ...

javascriptjqueryhtmltwitter-bootstrap

Adjust the position of a child element to be just outside the boundaries of its parent element using CSS

I am facing an issue with 2 nested divs in my HTML code. The design requires the inner div to appear "on top of" the outer div, like this: (source: examplewebsite.com) Although I have applied CSS to both elements, including a negative top margin on t ...

htmlcsspositioning