Enhancing CSS layout design with Bootstrap framework

I have a design of the section shown below, https://i.sstatic.net/jJB3a.jpg
I am looking to replicate this design using bootstrap/CSS. Here is what I have attempted so far

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<div class="row content-test-section">
    <div class="col-lg-6 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div class="col-lg-6 block-div">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
</div>

This task is taking up quite a bit of my time and I need to complete it urgently. I would greatly appreciate any assistance that can be provided.

htmlcssbootstrap-4

Answer №1

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}
.mt-70px{
 margin-top:70px;
}
.d-flex{
  display:flex;
}
.mt-5{
  margin-top:50px;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div class="d-flex flex-row">
    <div class="flex-column">
    <div class="col-lg-7 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">03</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">05</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
     <div class="flex-column">
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">04</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">06</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
</div>

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

Resizing with Jquery results in sudden movement

I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...

jqueryhtmlcssjquery-ui

How can we use vanilla JavaScript to implement an image zoom effect on mouse movement?

I'm attempting to implement an onmousemove event within an image that displays a zoomed image on the right side. Issue: When I move my mouse inside the image, the black box and zoomed image flicker. The zoomed image does not align correctly in the b ...

javascripthtmlcss

Are you able to design a webpage with the following table layout:

Click here to see the design Assign a letter to each table cell and provide all dimensions in pixels. The assigned letters and dimensions should not be visible on the final web page. Make sure the external border of the table is 4 pixels wide, and interna ...

htmlhtml-tableweb-developer-toolbar

When should I use event listeners with Bootstrap 4 and jQuery in my nav-link?

In my Bootstrap 4 project, I have successfully implemented a navigation bar that is fully functional. However, when trying to replicate the same bar in another section of my code, only one of the two items seem to be working properly! After thorough invest ...

cssbootstrap-4navbarevent-listener

Issues with CSS not loading correctly in Express application

I have the following code in my app.js file: app.use(express.static(`public`)); And in my HTML, I'm including a stylesheet like this: <link rel = `stylesheet` href = `css/styles.css`/> However, none of the styles from the stylesheet seem to be a ...

cssexpress

Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...

htmlcssreactjsmaterial-ui

What is the best way to ensure that an image perfectly fits within a div container?

My goal is to make my image occupy half of the div's width and 100% of the height. However, I am facing an issue with a lingering white bar at the bottom. Can you offer some guidance on how to resolve this? Take a look at the site preview .contain ...

htmlcss

Which component from the Bootstrap library would be best suited for my needs?

I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...

htmlcsstwitter-bootstrap

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Focusing on a specific input category inside a div container

Struggling to customize the appearance of the last input type within the Jetpack plugin in WordPress. I have experimented with the following CSS: #subscribe-submit > input[type="submit"]::last-of-type { #subscribe-submit > input[type="submit"]:nth- ...

css

Is there a way to ensure that the tab character " " remains consistent in size within a textarea at all times?

My current challenge involves inserting tabs of the same size into a textarea. The example shows that the only variation in each line of the testString is the placement of the \t. However, when displayed in the textarea, the tab sizes differ dependi ...

javascripthtmlcss

What steps can I take to ensure my site retains its appearance when minimized?

When I maximize my website, it looks great, but when I restore it down, the box on my site becomes distorted. I'm new to designing websites and struggling with this issue. Here's the code I've been using: .boxed { position: absolute ...

htmlcss

inner element positioned absolutely overlapping scrollbar

I was unable to locate this specific question. I have configured a page as <div id="page"> <div id="chrome"> <div id="element">bla</div> <div id="content">bla</div> </div> </div> #p ...

htmlscrollbarcss-position

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...

javascriptjqueryhtmlcss

Is there a way for me to modify both the label number and text?

Is there a way to dynamically change label text and hide certain labels based on a condition in JavaScript? Appreciate any assistance! $('.radio').on('change', function(e) { if (suma == 1) { // changing question ...

jqueryhtml

"Exploring the process of utilizing AngularJS to open a .docx file in a new template

When attempting to open a .jpeg or .pdf file in a new template using an iframe, it was successful. However, the same approach failed when trying to open a .docx file. How can this issue be resolved? Angularjs code: $scope.openTemplate = function ($fpath ...

htmlangularjsiframe

What is the best way to combine a bootstrap 4 table with Angular?

Currently, I am facing some challenges while trying to incorporate a bootstrap 4 table into my Angular project. It appears that jquery is not functioning properly in this integration. You can view my current implementation here. The issue arises when any c ...

jqueryhtmlangulardatatablesbootstrap-4

Preventing a floating element from extending beyond the right side of a Bootstrap row

Hello, I'm a beginner in web development and currently using the Bootstrap 4 grid system for my project. Currently, I am working on a row that contains a title and a breadcrumb. My goal is to have the breadcrumb float to the right of the row, but whe ...

twitter-bootstrapbootstrap-4

Integrate a scrollbar seamlessly while maintaining the website's responsiveness

I encountered an issue where I couldn't add a scrollbar while maintaining a responsive page layout. In order to include a scrollbar in my datatables, I found the code snippet: "scrollY": "200px" However, this code sets the table size to 200 pixels r ...

javascriptjqueryhtmlcssdatatables

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

javascriptajaxhtmliframesinon