Proper alignment of multiple elements with Bootstrap

I am currently incorporating Bootstrap panels into my project, and I have a design mockup that looks like this: https://i.sstatic.net/pHArl.png

The Profile text and progress bar need to be aligned to the left, while the collapse icon should be aligned to the right.

Here is the code snippet I have at the moment:

<div id="panelProfile" role="tab" class="panel-heading">
  <h4 class="panel-title">Profile</h4>
  <div class="progress body-profile">
    <div class="progress-bar">
      <div class="progress-filled"></div>
      <div data-bind="" class="progress-value"></div>
    </div>
  </div>
</div>

I have attempted to use float for both the profile text and progress bar, but it resulted in this layout: https://i.sstatic.net/zmcrM.png

Is there a more effective way to achieve this alignment without specifying explicit values? It needs to remain responsive.

htmlcsstwitter-bootstrap

Answer №1

Have you considered nesting a div.row inside your main div#panelProfile?

<div id="panelProfile" role="tab" class="panel-heading">
    <div class="row">
        <div class="col-xs-2">
            <h4 class="panel-title">Profile</h4>
        </div>
        <div class="col-xs-8">
            <div class="progress body-profile">
                <div class="progress-bar">
                    <div class="progress-filled"></div>
                    <div data-bind="" class="progress-value"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-2">

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

Answer №2

This solution is tailored to meet your needs.
Include the pull-right class for the Minus Icon.
Add the Pull-left class for the Profile section.
For a centered "View Complete Profile," apply the text-center class.
Enjoy coding!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
 .progress{
border-radius: 15px;
  }
  .circle-minus{
    width: 5px;
    height: 3px;
    border: 1px solid black;
    border-radius: 50%;
    padding: 1px 7px;
    font-size: 14px;
  }
  .panel-heading{
    background-color: white ! important;
  }
  .panel-footer{
    background-color: white ! important;
  }
   body{
    padding-top: 15px;
  }
</style>
<body>
 
<div class="container">
  <div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="panel panel-default">
      <div class="panel-heading">
 <div class="pull-right"> &nbsp; &nbsp; 50% &nbsp; &nbsp; <span class="circle-minus">-</span></div>
    <div class="pull-left">Profile &nbsp; &nbsp; &nbsp; &nbsp; </div>
      <div>
    <div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    
  </div>
</div>
      </div>


      </div>
      <div class="panel-body" style="height: 250px;"></div>
     <div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div>
   </div>
</div>
  </div>
</div>

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

Generate a random word using Typed.js

Can Typed.js generate a random word for output? $(function(){ $(".element").typed({ strings: ["Lorem", "Ipsum", "Dolor"], typeSpeed: 0 }); }); The output should be one of the following words. (Lorem / Ipsum / Dolor) ...

javascriptjqueryhtmlrandomtyped.js

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

Container items in flexbox that surpass the defined width

Hello, I am facing an issue where my container is exceeding the maximum allowed width of my flex container (with justify space-between). Essentially, I have divided my 3 children into equal parts of 33.33%, but the total width exceeds the limit: Image: ...

cssreactjs

Connection to external sources has been deactivated

I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, ...

htmlcssimage

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

Using jquery to update a link when a different link is clicked

Recently, I've started using JQuery and encountered a challenge. When I click on the first link, an Ajax request is sent to the server and data is received successfully. However, in the callback function, I'm struggling to change the display text ...

javascriptjqueryhtmljquery-selectors

What are the steps for installing the latest version of popper, v2?

When you run the following command: npm install popper.js --save You will receive a warning message that says: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f1eef1f1e4f3afebf2c1b0afb0b7afb0">[email& ...

javascriptjquerytwitter-bootstrapnpmpopper.js

Placing an icon and a title on the same baseline

I'm working on a new website design and I really like the layout shown in this image: https://i.stack.imgur.com/QuVRZ.png I've been struggling to align the icon with the title in a responsive manner. Here are some of the approaches I've att ...

htmlcss

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

I have a piece of jQuery code that is not functioning as expected: $("#erase").click(function(){ $("#erase").attr("disabled", "disabled"); // Prevent double-clicking $(this).html("Erasing..."); $.post("erase.php", {target: $("#targ ...

javascriptjqueryhtmlajax

The navigation bar and column layout is not functioning properly in Firefox

Hey there! I'm having a little issue with my website. When I view it in Chrome, everything looks perfect - the logo is left aligned at the top right and the testimonials section at the bottom has a nice 3 column layout. But when I try to open it in Fi ...

htmlcssfirefoxtwitter-bootstrap

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

javascripthtmlfirebasefirebase-authentication

Aligning text to the right within a div that is placed inside an image element

I have a simple structure that looks like this: <div class="inline"> <div class="photo-group thumb_wrapper"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" ...

htmlcss

Challenges with right-to-left alignment in Bootstrap 4 input groups

Recently, I was tasked with making a bootstrap v4 page RTL for a project. After adding the dir="rtl" attribute to the code, I noticed that the styling of the input-group element got all messed up: <link href="https://v4-alpha.getbootstrap.com/dist/c ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

TypeScript: displaying parameters

variable_field = [["S",".","."],[".","#","."],[".",".","T"]]; <ng-template ngFor let-array [ngForOf]="field_array" let-x="index"> <ng-t ...

htmlangulartypescript

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...

phpjqueryhtmlajaxjquery-ui

What's the best way in Angular 6 to set focus on an element that's being made content editable?

I am currently utilizing the contentEditable attribute in Angular 6 to allow for editing the content of elements within an ngFor loop. Is there a way to focus on a tag element when its contentEditable attribute is set to true? <div class="tag" *ngFor= ...

javascripthtmlangulartypescriptangular6

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

htmlcsshtml-table