Card Alignment with Bootstrap

I need help aligning the last two elements in the card. I want the first one (a button) to be on the left, and another element (a Div with multiple social icon images) on the right side. Can someone provide guidance on how to achieve this layout?

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435d435f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="card col-8 position-absolute top-50 start-50 translate-middle">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="row justify-content-between">
                    <a href="#" class="col-2 btn btn-primary">Portfolio</a>
                    <div class="col-10">
                        <img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




  <script src="js/bootstrap.js"></script>
</body>

</html>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Your images will be compatible, but I have enhanced your social media icons by importing font-awesome. To achieve this, I utilized a div element with the class col-4 for your a tag, and employed col-8 for showcasing the social media icons. Additionally, I applied text-end to align the icons on the right side of the page and included align-items-center to ensure proper alignment.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d4658465a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Document</title>
</head>

<body>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="row align-items-center justify-content-between">
                  <div class="col-4">
                    <a href="#" class="btn btn-primary">Portfolio</a>
                  </div>
                    <div class="col-8 text-end">
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-linkedin"></a>
                        <a href="#" class="fa fa-twitter"></a>
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




  <script src="js/bootstrap.js"></script>
</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

Guide on creating line breaks within a list in a Python email

I'm having trouble querying a list from my Flask database and then sending it out as an HTML email. The issue is that I can't seem to break the list items into different lines. For example, instead of: a b c I currently get 'abc' i ...

pythonhtmlemailflaskgmail

Setting a CSS Variable with the Help of jQuery

I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready. Currently, I am using a CSS variab ...

javascriptjqueryhtmlcss

Encountering issues with integrating Sass into Angular 4

Hi there! I recently started a new project in Angular 4 and encountered some issues with the Sass styling. Every time I try to add sass and run the project, I keep getting this error message: body{ h1{ color : red; } } ^ Invalid ...

cssangularsass

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

javascriptphpjqueryhtmlcss

Prevent textArea from reducing empty spaces

I am facing an issue with my TextEdit application set to Plain Text mode. When I copy and paste text from TextEdit into a textarea within an HTML form, the multiple spaces get shrunk. How can I prevent the textarea from altering the spacing in the text? T ...

javascripthtmlcsstextareaforms

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

javascriptjavaandroidhtml

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

htmlcss

retrieving embedded content from an iframe on Internet Explorer version 7

Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...

javascriptjqueryhtmlinternet-exploreriframe

Retrieve the image information from a specified element in the Document Object Model

Is it possible to extract the image data of a DOM element using standard JavaScript or browser extensions? I'm considering scenarios where: Creating an offscreen DOM element Populating it with dynamically styled CSS content Retrieving its image dat ...

javascripthtmldom

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: https://i.sstatic.net/J4DPp.jpg I'm attempting to achieve this look using CSS: https://i.sstatic.net/fuucK.png I've experimented with skewing but the red area persists, regardless of t ...

htmlcsstransform

Problem aligning ul within div element

I'm having trouble aligning my ul element in the center of a div. I tried using the margin: 0 auto method, but it's not working as expected. I've always wondered if setting the width of the ul within a div is necessary for using margin: 0 au ...

htmlcsshtml-lists

Is it possible for iText 5 to convert PDF files into HTML format?

My latest project involved using iText 5 to generate a visually appealing report complete with tables and graphs. Now I'm curious to know if iText also has the capability to convert PDF files into HTML format. If it does, how would one go about doing ...

htmlpdfitext

The HTML width of 100% extends beyond the boundaries of the page

Having limited experience with HTML and CSS, I'm encountering an issue with setting the width to 100%. It seems to exceed the browser borders. Can someone check out the example below? Should I slightly decrease the width percentage, or could there be ...

htmlcsswidth

What is the best way to insert additional text into an li element without replacing the text that is already there using

Currently, I am adding to a list and need to prepend text to an li item whenever the user clicks on a radio button. I attempted using the JQuery .text() function but found that it overrides the existing content instead of appending. $("#" + condition + "- ...

jqueryhtml

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...

htmlcssangulartypescript

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

Obtain the checkbox status using node.js

I'm trying to access the checkbox value from req.body in a node.js application. However, when I log it, it keeps showing as 'undefined.' HTML <label> <input name='sell' type='checkbox' value='fals ...

htmlnode.jscheckboxrequest

What is the best way to merge variable name in AngularJS?

How to combine variable name in HTML code: app.controller example $scope.name ='abc'; $scope.abc123 = response.data; HTML example <h1>{{name}}</h1> <h1>{{{{name}}123}}</h1> <!-- I want the value of abc ...

htmlangularjs

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

Shutting down the jQuery pop-up

I am struggling with trying to display this code as a popup on my website. Here is the code I have: <div id="myDialog" title="myTitle"> <div class="table_cell"> <div class="message"></div> </div> <div class="tabl ...

javascriptphpjqueryhtmlyii