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

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:

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 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

Proper method for positioning text in a line

Trying to recreate the image below, but facing alignment issues with the text in my code. How can I vertically align the text so that they are aligned like in the photo? Flexbox hasn't helped due to varying text lengths causing misalignment. const ...

javascripthtmlcsscontainersalignment

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

javascriptjqueryhtmlangularjs

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

javahtmlseleniumxpathselenium-webdriver

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

Display HTML in PHP and set the input value as a PHP variable

I'm struggling with my PHP code and need some assistance. I want to echo an HTML input field with a specific value from a variable, but it's not working as expected. Can anyone provide guidance on what might be going wrong? echo "<input type= ...

phphtml

The specified 'image' identifier has not been defined. There is no such member within 'never'

Edit :: Finally, I managed to get the output successfully, but there's still an error that baffles me. https://i.stack.imgur.com/2wrNM.pngAlthough I've tackled similar issues in the past, this particular one seems elusive. I attempted using "?", ...

htmlangular

The browser prevented the script located at “http://127.0.0.1:5500/assets/platform.png” from loading due to an invalid MIME type of “image/png”

Sorry if this question seems repetitive, but despite extensive searching, I haven't been able to find a solution to my specific problem. I am currently working on developing a basic JavaScript game, but I'm facing challenges when it comes to impo ...

javascripthtmlcanvasmimeliveserver

A fragmented rendering of a gallery featuring a CSS dropdown menu

Hey there! I'm a newbie coder seeking some assistance. Recently, I stumbled upon a tutorial online that taught me how to create a drop-down menu. However, whenever I hover over "Gallery" on my website, things go haywire and the layout gets all messed ...

htmlcssuinavigationbar

What is the significance of keyframes in CSS animations at different percentages

I'm facing a challenge with the code below that is intended to make objects float from left to right in the background. However, once they go off-screen, a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I atte ...

csscss-animations

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

javascriptjqueryhtmlcss

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

javascripthtmlcssangulartypescript

When seen on a mobile device, the background image is set to repeat along the

Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...

htmlcssresponsive-design

Tips for hiding text on hover effect

I'm currently working on a menu where each item displays text that is replaced by an email address on hover. However, I am struggling to remove the text during the hover state. Below is the code I have written so far: #home { font: 30px 'Le ...

cssvisibilityhiddenfont-size

Disable form input fields while keeping all other elements enabled

Currently, I am facing a dilemma where I must deactivate specific input fields within a form. Given that there are numerous fields to consider, individually disabling each one seems impractical. Can anyone offer advice on how to disable a set of elements ...

javascripthtmlcssreactjs

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

javascriptcssreactjssvg

Troubleshooting Issue with InfoWindow Display on Multiple Markers in Google Maps

I'm having trouble getting my markers to show different infowindows. No matter what I do, the markers always display the content of the last "contentString" in the loop. Despite reading through multiple posts on this issue, I haven't been able t ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf

Implement a context path in Angular 2 for enhanced functionality

Is there a way to change the base URL for my app from http://localhost:4200 to http://localhost:4200/pilot/? I attempted to modify the base href in index.html, but encountered an Uncaught SyntaxError: Unexpected token < This is the code snippet from m ...

htmlangularhrefangular2-routing