The bootstrap pull-left and pull-right classes are not functioning properly when used in Angular

I'm currently working on this project in Angular and using Bootstrap. I'm trying to display the name and description on the left side and the image on the right, but it's not working as expected. Any help would be appreciated.

You can find the code link here.


<div class="row">
    <div class="col-xs-12">
        <button class='btn btn-success'>New bug</button>
    </div>  
</div>
<hr>
<div class="row">
 <div class="col-xs-12">
 <a href="#" class="list-group-item clearfix" 
    style="background:grey ; color:red;" 
    *ngFor="let bug of bugs">
            <div class="pull-left">
                <h4 class="list-group-item-headin">name</h4>
                <p class="list-group-item-text">description</p>
                <span class="list-group-item-text">type</span>
                <span class="list-group-item-text">status</span>
                <span class="list-group-item-text">priority</span>                  </div>  
          <div class="pull-right">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" 
       alt="{{bug.name}}" 
       class="img-responsive" 
       style="max-height: 100px;">
 </div>
            </a> 
        <app-bugs-item></app-bugs-item>
    </div>  
</div>
cssangulartwitter-bootstrap

Answer №1

It seems like you're looking to have the text wrap around the image. In that case, simply apply the float class to the image and move it above the text.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-success">New bug</button>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12">
      <a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
        <div class="float-right">
          <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
        </div>
        <h4 class="list-group-item-headin">name</h4>
        <p class="list-group-item-text">description</p>
        <span class="list-group-item-text">type</span>
        <span class="list-group-item-text">status</span>
        <span class="list-group-item-text">priority</span>
      </a>
      <app-bugs-item></app-bugs-item>
    </div>
  </div>
</div>

If you prefer the text and image in 2 columns, consider using flexbox for this layout:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-success">New bug</button>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12">
      <a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
        <div>
          <h4 class="list-group-item-headin">name</h4>
          <p class="list-group-item-text">description</p>
          <span class="list-group-item-text">type</span>
          <span class="list-group-item-text">status</span>
          <span class="list-group-item-text">priority</span>
        </div>
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
        </div>
      </a>
      <app-bugs-item></app-bugs-item>
    </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

GSAP also brings scale transformations to life through its animation capabilities

I have an SVG graphic and I'm looking to make four elements appear in place. I've been using GSAP, but the elements seem to be flying into place rather than scaling up. Here's the code snippet I've been using: gsap.fromTo( ...

javascriptcsscss-animationsgsap

Executing Child Validators when moving to the next step in an Angular MatStepper from the Parent Component

I am looking to implement validation for my Mat-Stepper-Next function in the App Component using child component validators. I have 3 different form components, each with its own form group, validations, and next button within the component. I am includi ...

javascriptangulartypescript

What is the reason behind RGB employing 6 hexadecimal digits?

RGB coding involves using two hex digits to represent the Red, Green, and Blue components of a color. For example, #ff0000 represents pure red. Each hex digit signifies a value from 0-15, or 4 bits of data. However, why do we use 32 bits to encode every ...

csscolorsrgbinformation-theory

"Is there a way to modify the value of a CSS selector property dynamically within a React JS code

Is there a way to dynamically change the color of a specific selector in a React component? In my SCSS file, I have the following rule: foo.bar.var * { color: blue; } But I want to change this color to yellow, red, or something else in my React code. ...

cssreactjssasscss-selectorsradium

Displaying elements based on the selected mat-radio-button

I'm struggling with the logic to show and hide elements based on the selected radio button. Here's my current pseudocode: <mat-radio-button [value]="0">BUTTON A</mat-radio-button> <mat-radio-button [value]="1&quo ...

angularangular-material

Ways to create the initial row text in jqgrid treegrid appear bold

Trying to make the text in the first row of a jqgrid treegrid bold? Here's what I attempted: #tree-grid .cell-wrapper { font-weight: bold; } However, this makes all nodes bold. How can I make only the first node (first row) bold? The treegrid i ...

javascriptjquerycssjquery-uijqgrid

Unable to utilize the bootstrap-datetimepicker feature

I need help integrating a datetime picker into my template. Even after following this tutorial , I am unable to locate the CSS and JS files in Django. Code snippet from the template: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boots ...

cssdjangodatetimepicker

What is the best approach to prevent the occurrence of two instances of | async in this particular scenario (version 4.0

Is there a way to achieve the desired outcome in this component without using .subscribe()? I attempted to implement *ngIf="user$ | async as user" but encountered difficulties with it. What is the best approach to create a local variable using user$ | asy ...

angularsubscription

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

Prevent external scrolling while Bootstrap modal is active

<div class="modal mt-5p" role="dialog" [ngStyle]="{'display':IONotes}"> <div class="modal-dialog modal-md mt-0px width-70p"> <div class="modal-content" style="height:500 ...

javascriptangulartypescriptbootstrap-4

Prevent the layout from shifting with CSS

I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...

htmlcss

Encountered an issue with deploying to Heroku due to invalid endpoints

I am currently in the process of deploying my application to Heroku. I meticulously followed all the deployment steps outlined in their documentation, but when I attempt to run the app, a perplexing error appears in the browser: Invalid Endpoint Allow me ...

node.jsangularexpressheroku

iPhone: Fixed position div disappearing

Currently, I am working on creating a mobile menu for my Joomla 3 site located at . The menu is functioning correctly on desktops, however, when attempting to view it on my iPhone, the menu slides in but remains invisible. Despite this, I can still tap on ...

javascripthtmlioscssmobile-safari

What could be causing my Styled Components not to display the :before and :after pseudo elements?

When attempting to use the content property in a :before or :after pseudo element, I am encountering a rendering issue. Here is a simplified version of the component: import React from 'react'; import PropTypes from 'prop-types'; import ...

cssreactjsstyled-componentspseudo-element

Display the element once the class enters the viewport

I am attempting to display a div only when certain elements with a specific class are visible in the viewport. I made progress with this example: http://jsfiddle.net/blowsie/M2RzU/ $(document).ready(function(){ $('.myclass').bind('inv ...

javascriptjqueryhtmlcssviewport

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

javascriptjqueryhtmlcss

Angular page not reflecting show/hide changes from checkbox

When the user clicks on the checkbox, I need to hide certain contents. Below is the code snippet: <input id="IsBlock" class="e-field e-input" type="checkbox" name="IsBlock" style="width: 100%" #check> To hide content based on the checkbo ...

javascriptangulartypescript

Webpack development server is failing to render the application

Currently, I am utilizing Angular Universal + CLI and my package.json configuration appears as follows: "scripts": { "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" ...

angularwebpackangular-universal

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...

javascripthtmlcssvue.jsvuejs3

Building an audio volume meter in Reactjs: A step-by-step guide

Looking for suggestions on creating a visually appealing volume meter bar using Reactjs and Material ui. I have a basic implementation with LinearProgress, but now I want to upgrade it with a new design. Any tips on how to achieve this using Material-ui? A ...

javascriptcssreactjsaudio-streaming