Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below:

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

Issue #1:
- There is no clear separation between the icon and the text (refer to the image). The title can vary in length.
- When the title is long and spans multiple lines, the icon fails to stay centered and shifts downwards (refer to the image).

How can I divide the Title into two parts, where one part is centrally aligned with respect to the height and width of the icon? Any suggestions would be greatly appreciated.

.btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>

      // More similar code snippets go here..

    </div>
</div>



Resolved Issue: https://i.sstatic.net/n1BNO.png

The problem has been successfully fixed, although there are still a few remaining minor challenges:
- The title and the icon are now divided, but I require additional space for the icon.
- The icon continues to shift downward slightly when the title expands beyond one line.

Your continued assistance is much appreciated!

htmlcssbootstrap-4accordionpanel

Answer №1

Utilizing the flex attribute in my solution, I suggest moving your icon before the text and applying the following CSS:

.panel-title{
    display: flex;
    align-items: center
}


    .panel-title {
        display: flex;
        align-items: center
    }

    .panel-title > i {
        margin-right: 10px;
    }

    .btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttest</h4>
            </div>
            <div id="whoweare3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttesttesttesttestesttes ttesttestt</h4>
            </div>
            <div id="contactus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="cold" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </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

Leveraging PHP for parsing an HTML document

I am currently working on a PHP application that involves parsing HTML content. My goal is to extract a particular column from a table and store it in PHP variables. Below is the code I'm using: $dom = new domDocument; @$dom->loadHTML($html); $d ...

phphtmlparsingdom

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

What measures can be taken to stop links from disrupting the style of a Polymer site?

In Polymer, it seems that many styles are inherited from the surrounding document. For example, the code snippet below will display the icon and button with a white foreground color and adjust spacing: <paper-toolbar> <paper-icon-button icon=" ...

csspolymer

Updating style of element in EJS following POST request in Node.js using Express

I am working on a form page that is supposed to display a Success Alert (Boostrap) once the user fills out the form and clicks the Submit button. <form class="well form-horizontal" action="/contact" method="post" id="contact_form"> ... (input fiel ...

javascriptcssnode.jsexpressejs

Comprehending the Syntax of the ExtJS Framework

I have recently inherited a project utilizing Sencha's ExtJS framework without any handover or documentation. As I navigate through the code, I find myself trying to decipher certain syntax and exploring resources tailored for newcomers to this specif ...

javascriptjquerycssextjs

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

htmlcss

Each time the web animation is utilized, it gets faster and faster

As part of an assignment, I am working on creating an interactive book that can be controlled by the arrow keys and smoothly comes to a stop when no key is being pressed. However, I have noticed that with each arrow key press, the animation speeds up. Bel ...

javascripthtmlarraysthree.js

Concealed text hidden beneath a Sticky Navigation Bar (HTML/CSS)

I'm in the process of creating a simple website that includes a sticky Navigation Bar. However, I'm encountering an issue where text added to the website is being hidden behind the Navbar. Is there a way for me to adjust the positioning of the te ...

htmlcss

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

phpcss

Substitute placeholders in the HTML code with Angular syntax

Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...

javascripthtmlangularjs

Tips for presenting the cards in a professional layout

After creating a group of cards in angular using a for loop, I encountered an issue: <div class="row"> <div *ngFor="let dev_data of data" class="col-3"> <div class="card shadow"> <div class="card-body ...

htmlangularbootstrap-4

Is there a method to ensure that only one Bootstrap collapse toggle is active at a time?

When toggling between collapsible cards using two buttons, my goal is to have button2 collapse target1 before expanding target2, and vice versa: <div class="container"> <div class="btn-group mx-auto"> <button class="btn" type="button" da ...

twitter-bootstrapbootstrap-4

Text Alignment Issue in Icon Bar of Zurb Foundation 5

There's an unusual problem I'm encountering with the alignment of text under the icon bar not being properly centered below the icons. Here is a snippet of the code: <div class="row"> <div class="small-12 columns"> < ...

htmlcsszurb-foundationzurb-foundation-5

What could possibly be causing the "Unexpected token (" error to appear in this code?

Sorry if this appears as a typo that I am struggling to identify. My browser (Chrome) is highlighting the following line <a class="carousel-link" onclick="function(){jQuery('#coffee-modal').modal('show');}">Book a coffee</a> ...

javascriptjqueryhtmlcss

The PHP "include" function seems to be malfunctioning when used inside

Hey there! I'm trying to incorporate an echo statement that includes a variable along with some CSS and an image, but for some reason it's not working as expected. Can anyone lend a hand? <?php if (isset($_POST['sharebutton'])) ...

phphtmlimagecss

What's the best way to horizontally align two logos in the navigation bar?

Has anyone successfully placed 2 logos on the navbar in Materialize Framework side by side? I'm struggling to make it work and could use some help. Here is my CodePen for reference. I've experimented with the display property but haven't ...

htmlcssmaterialize

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

csshtml

jQuery and Bootstrap collide

Here is my jQuery code that toggles visibility of different divs based on a click event: $(function () { $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide(); $("a").bind("click", function () { $(".conor-div, . ...

javascripthtmljquerycssbootstrap-4

Sorting table by priority in HTML is not functioning as expected

I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...

javascripthtmlsortinghtml-table

A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

I have created two tables and added a checkbox for each one. Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet: <button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !check ...

htmlcssangularjscheckbox