The Ultimate Guide to Mastering Boostrap 4 Layout

I'm struggling to figure this out, but I need the following image:

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

The issue is that the text on the left ("100% digital application process") needs to be within a container to match the margins and padding of the site.

Here's what I have so far:

<div class="container-fluid bg-primary" style="padding-left: 0;">
     <div class="row" style="padding-left: 0;">
      <div class="col-lg-7 how-it-works-background" style="padding-top: 145px; padding-bottom: 125px;">
      <div class="container">
          <div class="row">
              <div class="col-lg-12" style="vertical-align: middle; margin:auto;">
                  <h2 class="font-white">100% digital</h2>
                  <h2 class="font-white">application process</h2>
                  <div style="padding-top: 28px;">
                      <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
                  </div>
                </div>
          </div>
      </div>
    </div>
    <div class="col-lg-5" style="vertical-align: middle; margin:auto; padding-left: 10%; padding-right: 10%;">
        <h4 class="font-white">same day cash transfer</h4>
        Apply before Xpm weekdays to get your loan approved on the same day.
        <br>
        <br>
        <h4 class="font-white">automatic repayments</h4>
        Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.
        <br>
        <br>
        <h4 class="font-white">no penalty for early repayment</h4>
        If you pay your loan off ahead of schedule, great! We don't charge fees for this.
    </div>
    </div> 
    </div>

If you have any questions, feel free to ask. Thanks for your help.

htmlcssbootstrap-4

Answer №1

When working with bootstrap, there are plenty of built-in classes available for styling, but it's beneficial to have a good understanding of the flex model in order to utilize them effectively.

Here is an example of how you could use them:

.row {
  height: 400px;
  /* This is for demonstration purposes; feel free to remove or reset it */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="container-fluid bg-primary pl-0 text-white">
  <div class="row " >
    <div class="d-flex col-lg-7 how-it-works-background"   >
      <div class=" m-auto">
        <div>
          <div>
            <h2 class="font-white">100% digital</h2>
            <h2 class="font-white">application process</h2>
            <div class="pt-4">
              <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
            </div>

          </div>
        </div>

      </div>

    </div>
    <div class="d-flex col-lg-5 justify-content-center flex-column py-2" >
      <h4 >same day cash transfer</h4>
      <p class="text-body">Apply before Xpm weekdays to get your loan approved on the same day.</p>
      <h4 class="mt-4">automatic repayments</h4>
      <p class="text-body">Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.</p>      
      <h4 class="mt-4">no penalty for early repayment</h4>
      <p class="text-body">If you pay your loan off ahead of schedule, great! We don't charge fees for this.</p>
    </div>
  </div>
</div>

Helpful resources and reminders: Before adding redundant styles, check available classes here. (You can also reset margins or padding here.)

To learn about using flex, visit this link.

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

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...

javascriptjqueryhtml

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

javascriptjquerycsspre

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

htmlcssvue.jswebfrontend

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

htmlcssflexbox

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

css

What measures can be taken to guarantee that a user is only able to delete designated records?

When it comes to writing SQL commands directly, it's simple to specify which records to delete using identifiers like ID. However, when dealing with webpages that contain a list of links pointing to different records (with the ID embedded as a query ...

javascriptjqueryhtmlnode.jspostgresql

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Blurring and masking an image within a hollow circle shape

I'm currently working on developing a similar example using react-native-svg. The background image I am using is dynamic and needs a transparent circular mask. Additionally, I want to apply a blur effect to that specific section of the background ima ...

cssreactjsreact-nativesvgreact-native-svg

Entering numbers using <input type="number"> does not restrict invalid inputs, while accessing "element.value" does not give me the ability to make corrections

According to the MDN documentation on the topic of <input type="number">: It is said that they have built-in validation to reject entries that are not numerical. But does this mean it will only reject non-numerical inputs when trying to ...

javascripthtmlvue.js

Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

There seems to be an issue with the Bootstrap 4 dropdown menu not displaying all the links. Please refer to the image below: https://i.sstatic.net/ZS2t2.png The dropdown menu is not showing beyond the red band. I can't seem to figure out what I&apos ...

javascriptcsshtmltwitter-bootstrapbootstrap-4

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax

Unable to locate href within form when button is clicked

Whenever I try to click the borrow button, it directs me back to itself instead of executing the borrowing.php action. Can anyone suggest a solution for this issue? <form id = "myform" action="includes/borrowing.php" method = "POST" enctype ="multipart ...

phphtmlmysqlformsbootstrap-4

There seems to be a problem retrieving the JSON file

My JavaScript file is designed to fetch a JSON file and execute a function if successful. If there's an error, it should display an alert window with the message "error". However, despite checking the syntax, I keep receiving an error alert every time ...

javascriptjqueryhtmljson

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

Currently, I'm working on the footer section of a webpage using HTML and Bootstrap 5.3.0. I encountered an issue where an underscore appears next to the icons when I add them. I suspect that this is due to the white spaces between the elements, which ...

htmlcssfont-awesomebootstrap-5

What is the best way to retrieve the duration of an object tag using JavaScript or jQuery?

My goal is to determine the duration and length of only mp4 type videos. Although I used the video tag to retrieve these values, it does not support mp4 files. Despite several attempts, I was unable to get the video tag to play only mp4 files, as it stric ...

javascriptjqueryhtml

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

javascriptphphtmlwordpressadvanced-custom-fields