What is the best way to insert an image into an HTML card?

I'm a beginner in PHP and I'm working on creating a registration form that should have a design similar to the picture linked below:

https://i.sstatic.net/7P7bn.png

However, the form I've created so far looks like this:

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

I'm struggling to add an image on the left side of the form. Here's my current code:

<?php require_once 'indexheader.php'; ?>

<!DOCTYPE html>
<html>
<head>
    <title>Leafnote | Register</title>
    <link rel="stylesheet" type="text/css" href="styles.css" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">  
    <div class="row">
      <div class="col-lg-4 m-auto">
        <div class="card bg-white mt-5">
          <div class="card-title text-black">
            <h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
          </div>
          <div class="card-body">
              <form action="process.php" method="POST">
                  <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2"> 
                  <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2"> 
                  <input type="text" name="email" placeholder="Email address" class="form-control mb-2"> 
                  <input type="text" name="passw" placeholder="Password" class="form-control mb-2"> 
                  <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">      
                  <button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>   

                  <div class="text-center mt-3" style="font-size: 14px;">Already have an account? 
                    <a href="signup.php" class="alert-link">Login</a>
                  </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

</html>
cssbootstrap-4

Answer №1

If you want to style your card using Bootstrap grid, here's an example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="col-lg-6 m-auto">
      <div class="card bg-white mt-5 p-2">
        <div class="row">
          <div class="col-4 my-auto mx-auto"> <img src="https://www.w3schools.com/bootstrap/la.jpg" class="img-fluid"></div>
          <div class="col-8 mx-auto my-auto">
            <div class="card-title text-black">
              <h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
            </div>
            <div class="card-body">
              <form action="process.php" method="POST">
                <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
                <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
                <input type="text" name="email" placeholder="Email address" class="form-control mb-2">
                <input type="text" name="passw" placeholder="Password" class="form-control mb-2">
                <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
                <button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>

                <div class="text-center mt-3" style="font-size: 14px;">Already have an account?
                  <a href="signup.php" class="alert-link">Login</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer №2

To enhance your layout, consider introducing an additional column beside the existing one.

Here is an example of how you can achieve this:

<div class="wrapper">  
    <div class="section">
      <div class="col">
        <img width='100%' src='https://example.com/image.jpg'/>
      </div>
      <div class="col">
        <div class="box bg-white mt-5">
          <div class="box-heading text-black">
            <h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Sign Up</h5>
          </div>
          <div class="box-content">
              <form action="process.php" method="POST">
                  <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2"> 
                  <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2"> 
                  <input type="text" name="email" placeholder="Email address" class="form-control mb-2"> 
                  <input type="text" name="passw" placeholder="Password" class="form-control mb-2"> 
                  <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">      
                  <button class="btn btn-success btn-block mt-3" name="signup" class="pt-3">Sign Up</button>   
                  <div class="text-center mt-3" style="font-size: 14px;">Already a member? 
                    <a href="login.php" class="alert-link">Login</a>
                  </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>

Adjusting the CSS may be necessary to ensure your image integrates well within the design. For more information on the Bootstrap grid system, refer to the documentation: https://example.com/bootstrap-grid

Answer №3

To enhance alignment options in Bootstrap, consider utilizing display: flex; instead of columns and extra CSS styles. Here is a sample code snippet to showcase this approach:

<div class="container">
  <div class="row">
    <div class="col-lg-4 m-auto">
      <div class="card d-flex flex-row align-items-center justify-content-center bg-white mt-5">

        <img class="mx-4" src="https://via.placeholder.com/150">

        <div class="d-flex flex-column flex-grow-1">

          <div class="card-title text-black align-self-baseline">
            <h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
          </div>
          <div class="card-body">

            <form action="process.php" method="POST">
              <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
              <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
              <input type="text" name="email" placeholder="Email address" class="form-control mb-2">
              <input type="text" name="passw" placeholder="Password" class="form-control mb-2">
              <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
              <button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>

              <div class="text-center mt-3" style="font-size: 14px;">Already have an account?
                <a href="signup.php" class="alert-link">Login</a>
              </div>
            </form>
          </div>
        </div>

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

Answer №4

I believe incorporating bootstrap card code with a left-aligned image would be beneficial.

<div class="container-fluid">  
    <div class="row">
        <div class="col-lg-6 m-auto">
           <div class="card flex-row flex-wrap">
                <div class="card-header border-0">
                    <img src="https://www.placehold.it/200" alt="">
                </div>
                <div class="card-block px-2">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">Description</p>
                    <a href="#" class="btn btn-primary">BUTTON</a>
                </div>
                <div class="w-100"></div>
                <div class="card-footer w-100 text-muted">
                    Footer emphasizing the cuteness of cats as animals
                </div>
            </div>  
        </div;
      <div class="col-lg-6 m-auto">
        <div class="card bg-white mt-5">
          <div class="card-title text-black">
            <h5 class="text-center py-2 font-weight-bold mb-0 mt-2">Register</h5>
          </div>
          <div class="card-body">
              <form action="process.php" method="POST">
                  <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2"> 
                  <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2"> 
                  <input type="text" name="email" placeholder="Email address" class="form-control mb-2"> 
                  <input type="text" name="passw" placeholder="Password" class="form-control mb-2"> 
                  <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">      
                  <button class="btn btn-success btn-block mt-3" name="register">Register</button>   

                  <div class="text-center mt-3" style="font-size: 14px;">Already have an account? 
                    <a href="signup.php" class="alert-link">Login</a>
                  </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>

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

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

Trouble arises with the jQuery keydown function

Currently, I am encountering an issue with a straightforward jQuery code implementation. In addition to the problem description, I have included the HTML structure below, The current functionality works as expected in setting focus on the input field upo ...

jqueryhtmlcss

White Background Dialog in Angular

I am struggling to change the default white background of my webpage. Is there a way I can use CSS to blur or darken the background instead? I tried applying CSS code but couldn't locate the correct class. I also attempted setting the "hasBackdrop" at ...

cssangular

Having trouble getting CSS calc to work on a table cell? Wondering how to make two out of four columns the same width?

Is it possible that CSS calc doesn't work on a table cell? It seems that no matter what size I change 90px to, the result looks the same. Even after trying various calculations with calc, I cannot seem to achieve the desired number of 230. The goal i ...

css

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

htmlcss

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

javascriptjqueryhtmlcss

Guide on how to initiate a file download with text area content by clicking an HTML button

I came across this code snippet on GeeksforGeeks, and it partially solves an issue I was facing. <script> function download(file, text) { //creating an invisible element var element = document.createElement('a'); ...

javascriptphphtmljquerycss

The correct way to link a separate CSS stylesheet called "stylesheet" to an HTML page is by using the proper syntax

How can you correctly link a CSS file called "stylesheet" to an HTML page when both files are located in the same directory? ...

htmlcss

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> ...

javascriptjqueryhtmlcss

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

javascriptphpcsslaravellaravel-blade

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...

jqueryjquery-uicss

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

htmlcss

Adjust the styling of CSS classes within an ExtJS application

I've been trying to customize the appearance of my calendar panel using extjs. In my EHR application, I have implemented the extjs calendarpanel and datepicker similar to the setup showcased in this link: When a date is selected from the datepicker a ...

cssextjs3

Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...

htmlcss

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Here's the JavaScript snippet I'm using: reset.addEventListener("click", function(){ document.querySelector("#body").classList.add("darkenPage"); myReset(); alert("Reset Successful!!"); document.querySelector("#body").classList.re ...

javascripthtmlcss

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

Use CSS to insert a solid rectangle into the contents of a table cell

Struggling with the HTML code that defines a table? Here is an example: <table> <th> <td style="width:200px"> col1 </td> </th> <tr> <td id="a1"> text1 </td> </t ...

css

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

My goal is to have the footer remain at the bottom of the page, which I achieved using the following CSS: position: absolute; bottom: 0px; While this code does bring the footer to the bottom as desired, the issue arises when the window is resized to a sm ...

c#asp.netcssasp.net-mvc-3footer

CSS: Is it possible to make a div even smaller than the invisible padding of a font?

link to code: http://jsfiddle.net/xVCrn/1/ (best viewed in chrome / webkit) I'm attempting to create a 1px margin for the red section within the dark button area, but I am struggling to adjust the height of the red part. =( The objective is to: ...

css