Card design in Bootstrap 4 showcasing a dropdown menu located on the right side

I am currently working with Bootstrap 4 and created a card:

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Now, I want to add an icon on the right side of the header along with a dropdown menu. Can you guide me on how to achieve this? I tried looking for examples online but couldn't find any.

csstwitter-bootstrapbootstrap-4

Answer №1

To display the icon and dropdown, place them inside a <div class="float-right">

Take a look at the unique Bootply demo I designed.

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

Tips for adding and removing active class with navbar links using JavaScriptonclick

I need help with toggling the "li-active" class on my navigation bar links. Currently, when I click on a link, the "li-active" class is transferred from the previous link to the newly clicked link instead of removing it first. Can someone please assist me ...

javascripthtmlcss

Center and align pictures within a stationary container

I am working on a simple webpage that has a fixed footer. In this footer, I want to have 5 images centered with equal distances between them. Below is my HTML/CSS : Footer div : div.fixed { position: fixed; bottom: 0; right: 0; width: ...

htmlcss

Issues with navigation menu not showing dropdown options and impacting webpage layout (HTML/CSS)

I'm having trouble creating a drop-down navigation menu using HTML and CSS. When I add the drop-down list, my menu extends onto two lines instead of one, and the drop-down menu doesn't appear when hovering. Here is a link to the jsfiddle for refe ...

htmlcss

Tips for positioning an element at the bottom of a flexible container with variable size

How can I ensure that the Author element in this jsfiddle is aligned properly between the card elements? I am struggling to adjust the size of the details container to match the variable sizes of other elements in the same row. The aim is to have the Auth ...

cssflexbox

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

javascriptcssxhtmltexthtml

Modify the CSS borders to reflect a selected radio input type

I'm attempting to change the color of a Radio Button to blue when it's selected, but I'm having trouble achieving this. Here is the CSS code I'm using: /* Radio Button Style */ .radio { padding-left: 25px; } .radio label { di ...

css

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

I'm currently working on designing a top navigation bar that features a logo with color #1 as the background on the left side. The logo is then separated by a grey horizontal divider, followed by color #2 representing the application name beside the d ...

javascripthtmlcss

Having difficulty eliminating the gap between the step connector and StepIcon component within the material-ui stepper

I am having trouble removing the space between the step and connector in my code. Despite trying various methods, I have not been successful. Currently, there is a default space between the step icon and connector, but I want to eliminate this space entir ...

cssmaterial-ui

What could be causing the alignment issue with cells in Bootstrap?

I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...

htmlcssbootstrap-4

Include a border around the entire tooltip

I'm having trouble adding a border to my tooltip that follows the outer lines of the entire tooltip. Currently, I've only been able to add a border to the upper part of the tooltip, which overlaps with the arrow section and isn't the desired ...

htmlcss

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

Challenges with aligning Fontawesome stacks

I utilized the code example from Fontawesome's website to create a pair of stacked social media buttons and enclosed it in a div element to float them to the right side of the page. <div class="social-icons"> <span class="fa-stack fa-lg"> ...

csswordpress-themingfont-awesome

Elevate when the mouse hovers over the button

My current task involves increasing the bottom-padding of a span when the mouse hovers over a button. Here is the button code: <button class="btn btn-success btn-circle" id="myBtn" title="Go to top"> <span id="move" class="fa fa-chevron-up"&g ...

javascripthtmlcssbootstrap-4

FireFox - Dynamic Blinking Divs on Hover

It seems like in FireFox and IE, my hover effect is blinking for some reason. I can't figure out why this is happening. Should I switch to using JavaScript for my hovers or is there an easier CSS solution? Here's a JSFiddle link to demonstrate th ...

htmlcssinternet-explorerfirefoxhover

display the entire calendar for the chosen month

I am currently using Foundation Datepicker and Full Calendar. My requirement is as follows: 1) When I select a date in the calendar, For example, let's say it's July 2016. If I choose a date in November or any other month in the Foundation Date ...

jquerycssdatepickercalendar

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

csstwitter-bootstrapnavbar

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

Utilizing Bootstraps modals, here is my current layout. Within the site's header, there exists a "settings" button that triggers a modal containing various options. These options are not tied to the question at hand. The button responsible for displ ...

javascriptphpcsstwitter-bootstrap

break-word property not functioning correctly within pre tag

Each row in my dataTable triggers a modal to appear: <div id="verifyModal" class="modal"> <div class="modal-content"> <h2>Verify # <span id="verify-modal-id"></span></h2> <pre><code class="" id="verif ...

htmlcssword-wrap

What could be causing my grid-area properties to not take effect?

I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...

csscss-grid