What is the best way to extend a column across multiple rows with bootstrap?

https://i.sstatic.net/uPsLe.jpg

Looking to convert the design above into HTML and CSS, specifically trying to achieve a layout where the image spans across 2 rows. However, I've been having trouble making it responsive even after trying some code snippets I found online.

Here's what I've attempted so far:

https://i.sstatic.net/WH3Qs.jpg

Below is my current code snippet:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
...
</body>
</html>

I would greatly appreciate any guidance on how to improve this. Thank you!

htmlcsstwitter-bootstrap

Answer №1

Check out this https://i.sstatic.net/J9Vv4.png View the jsfiddle Code

<body>

<div class="container-fluid">

  <div class="row">
    <div class="col-sm-2" style="background-color:lavender; margin: 0px;">


    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Terminator-2-judgement-day.jpg/250px-Terminator-2-judgement-day.jpg" width="250" height="250">

    </div>
    <div class="col-sm-10" style="background-color:lavenderblush;">
        <div class="col-sm-12" style="background-color:white;">
            <h1 style="color:#512586;">LAWAL HARDCORE</h1>
            <h3 style="color:#;">UI/UX Designer | Graphics Designer</h3>
            <p> <b>EMAIL:</b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7915180e181511180b1d1a160b1c391c0f1c170d160b571a1614">[email protected]</a></p>

        </div>
        <div class="col-sm-12" style="background-color:#512586; color: white; height: 120px;">
            <div class="cols-12">
            <div class="col-sm-6">
                <h4>Craninum One, Towry Close,</h4>

                <h4>Adeola Odeku, Victoria Island, Lagos.</h4>
            </div>
            <div class="col-sm-6" style="padding: 25px; height: 68px; text-align: center;">

                <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-facebook" style="color: #512586"></span>
                  </button>
                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-twitter" style="color: #512586"></span>
                  </button>
                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-instagram" style="color: #512586"></span>
                  </button>

                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-linkedin" style="color: #512586"></span>
                  </button>
            </div>


            </div>
            <div class="cols-12" >
            <div class="col-sm-2">
            <p>08111 0832 161</p>
            </div>  
            <span class="col-sm-1">|</span>
            <div class="col-sm-2">
            <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670e09010827021102091308154904080a">[email protected]</a></p> 
            </div> 
            <span class="col-sm-1">|</span>
            <div class="col-sm-2">
            <p>www.eventor.com</p>
            </div> 

        </div>

    </div>


  </div>
  <div class="col-sm-12" style="background-color:white;">
        <div> DISCLAIMER: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
    </div>
</div>


</body>

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

Is it possible to have a <small> element nested within an HTML5 heading such as h1, h2, h3, etc?

I am curious about the proper way to structure headings in HTML5. Can I include a <small> element within an <h3> tag? For example: <h3>Payment details <small>(this is your default card)</small></h3> ...

htmlw3c

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

How can I locate the input field using XPath that is positioned next to a

I am having difficulty targeting a checkbox located next to a label with a specific name that includes an underscore character. Here is an example of the DOM structure: <div id="form-2143"> <div id="wrap-1353"> <label id="numberfield ...

htmlxmlseleniumxpath

"Create a React Bootstrap Alert component with a dismissible button feature that is

I'm trying to add an "X" button to dismiss an alert on my website, but the bootstrap style isn't working properly. I've attempted setting the closeLabel to empty string, but it hasn't resolved the issue The desired outcome is: Below i ...

reactjstwitter-bootstrapwebalertreact-bootstrap

Acquiring the `=` symbol within email HTML

Here is the HTML that I send from my ASP.NET application: <HTML> <BODY> <img src='http://10.1.1.42:8090/EmailLogo/8aaebe52-3758-485f-8c52-7782707a4c66.jpg' /> <br/> <div style='font-family:Arial, Tah ...

htmlasp.net

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/ ...

htmlcssbootstrap-4

Failure to include jQuery and CSS in the AJAX response

Having trouble with my slider. The script that is added at runtime is not showing up in the ajax response. Does anyone know why this might be happening? $.ajax({ url:"ajax_get_response_eng_to_change.php", type:"POST", async:true, data:{c ...

jquerycssajax

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

Attempting to test 7 possible values for the variable 'a' by passing it to a function from user input in seven 'input type text' boxes, then checking each value individually with clicks on 7 'input type image' elements. Howeve ...

javascripthtml

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

javascripthtmlcssfont-size

What is the best way to extract the content within a nested <p> element from an external HTML document using the HTML Agility Pack?

I'm currently working on retrieving text from an external website that is nested within a paragraph tag. The enclosing div element has been assigned a class value. Take a look at the HTML snippet: <div class="discription"><p>this is the ...

c#htmlxpathhtml-agility-pack

The height of the multicell generated by fpdf is inconsistent

After writing the code below, everything seems to be working fine except for the multicell row heights which are not displaying correctly. I encountered this issue several times while testing it out. $x=$pdf->GetY(); $pdf->SetY($x+1); include_once( ...

phpcssrowfpdf

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Is there a reliable way to determine the width and height of the page content-block-inner, excluding the navbar and toolbar? This measurement can vary across different devices and operating systems. I attempted to assign an id to the content-block-inner a ...

javascriptjqueryhtmlcsshtml-framework-7

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

Having trouble getting Javascript Jquery to function properly?

There is a button that, when clicked, changes the HTML in the body tag to include a new button. However, when this new button is clicked, it should trigger an alert message but it is not working as expected. I suspect that the issue lies with the document ...

javascriptjqueryhtml

The submission feature for the textarea in Javascript is not functioning properly

As someone who is new to frontend development, I am currently facing a challenge with debugging JavaScript code that involves making changes to the content of a textarea. Despite my efforts to debug using the browser console, I have yet to identify why it ...

javascripthtmltextarea

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Concealing the view-source feature in core PHP or HTML

Is there a way to conceal view-source in basic php or html? I've come across some information on this topic, but I'm having trouble grasping how to implement it: Web Developer Class: How to Hide your Source Code ...

phphtml

Display a progress bar in an application to visualize the loading of database records

Within my application, I am accepting a numerical input that is used to generate results on a separate page. The process involves running multiple sequential JDBC queries against Oracle database tables, resulting in a significant delay (1-2 minutes) for th ...

javahtmlcssjspjdbc

unable to locate the nearest available table

This is my HTML code: <div id="dvUser"> <table id="tblUser" > <tbody> <tr> <td> <input class="sfCheckBox" type="checkbox" title="view" checked="checked"> </td> </tr> <tr> <td> <input class="sf ...

jqueryhtml

What is the specific use of the second app.css file in Laravel?

I'm currently delving into Laravel 8, and I'm perplexed by the role of Resources\css\app.css. While every other component in the Resources directory serves a clear function, the app.css file appears to be empty. Even when I attempt to a ...

phpcsslaravelnpmnpm-run