Positioning Bootstrap 4 Card Header to the left

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">

  <div class="col-sm-3">
    <div class="card bg-light mb-3 text-left" style="max-width: 18rem;">
      <div class="card-header text-center">Logo</div>
      <div class="card-body">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>


</div>

The code above generates the following layout: 

+-----------+
| Logo      |
+-----------+
| Content   |
+-----------+

However, I would like it to look like this:

+------+-----------+
| Logo | Content   |
+------+-----------+
| Content         |
+------------------+

I want the Card Header to be on the left side. I am using the most recent version of Bootstrap.

csstwitter-bootstrapbootstrap-4

Answer №1

To achieve this, Bootstrap grids can be utilized effectively.
Responding to the query raised in the comment, here is an updated snippet based on requirements: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="card bg-light mb-3 col-6">
    <div class="row">
      <div class="card-header col-6 border">Logo</div>
      <div class="card-body col-6 border">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </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

The Ideal Image Aspect Ratio for Twitter Bootstrap Carousel

I am trying to implement a carousel using Bootstrap, but I am facing an issue with displaying images of different dimensions. I want the images to maintain a fixed ratio within the carousel, but all my attempts with CSS have failed so far. CSS .carousel ...

htmlcsstwitter-bootstrap

Is it possible to locate the storage location of your CSS class in WordPress using the Chrome DevTools?

I need to switch the positions of two tabs on my product page: https://i.sstatic.net/L7xcC.png The Learn More tab should be in place of the Specification tab, but I am having trouble locating the class. I have searched for the class in the style.css fil ...

csswordpress

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

javascriptcssfontsnext.jstailwind-css

Just as "Bootstrap" is to "HTML/CSS/JS", does Flutter offer any open source options for prebuilt widgets?

Just starting to learn Flutter, I am curious if there are any open sources for pre-built widgets that can be incorporated into my project, similar to BOOTSTRAP. I am also interested in the availability of pre-built code snippets for tasks like creating fo ...

flutterbootstrap-4widget

Looking to insert an icon into the placeholder?

I am trying to insert a location icon into the placeholder of a label in a React component. <label> Places <input className="p-2" ...

reactjsbootstrap-4iconsplaceholder

Is it possible to customize the formatting of the information displayed within a details tag when it is nested under a summary

Is there a way to format the details information so that it aligns underneath the summary tag? Currently, both lines of text are aligned to the left. <details> <summary> Summary 1 </summary> Details 1 </details> ...

csscss-selectors

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

How can the color of unselected mat-steps be customized in Angular?

In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...

cssangular-materialmat-stepper

Adjust the scroll position when the height of a div is modified

Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...

javascripthtmlcssvue.js

ng-view displays unexpected behavior when used with bootstrap data tables

For the first time, I decided to utilize a pre-made template for my project. You can find the theme by following this link here. I've been facing an issue where the datatable from the theme doesn't load properly into the ng-view. Everyt ...

angularjsdatatablesbootstrap-4ng-view

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

csshtmlcss-position

Place 2 unique keys into the specific cells of a bootstrap table template

Good Day! I am looking to multiply the values from two different fields in my code. Currently, I can only access and display one cell in the template but I want to perform a multiplication between two different cells. <b-table :items="this.data ...

vue.jsbootstrap-4bootstrap-vue

Implementation of a text field in Reddit using Material-UI

As I attempt to replicate the Reddit text field design from material-ui, I've created a custom component. However, I keep encountering an invalid hook call error when I reach the line containing const classes=.... Here is the code snippet: import Re ...

cssreactjsmaterial-ui

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

Issue with ng-cloak not resolving flicker on button in Chromium; strangely, ng-cloak CSS doesn't apply as expected

Here is a snippet of my HTML code: <button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button> The code above is a part of the larger HTML document shown ...

javascriptcssangularjsng-hidengcloak

Is there a method to establish a comparable effect to the CSS "text-indent" property, but specific to the font being used?

I cannot understand why the "text-indent" value is specified in pixels. Various fonts require different indentation levels, making it a hassle to adjust each time the font changes. It would be much easier if text-indent: "mmm"; was interpreted as "add ...

csstext-indent

What is the functionality of the 'em' CSS unit when used with positioned elements?

Here is an example of HTML code featuring nested div tags and a p tag as the innermost element: <!DOCTYPE html> <html> <head> <title>How em unit works?</title> <link href="style.css" rel="stylesheet" ty ...

htmlcss

Vuetify Card Overflow: Handling Multiline Text with Ellipsis

I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feat ...

htmlcssvue.jsvuetify.js

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

CSS media query to target specific viewport width

In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...

javascripthtmlcss