Struggling to create a unique grid layout with bootstrap framework

After working with Bootstrap for about a month, my HTML code may be a bit messy. The current task requires me to create a custom slick carousel in order to achieve a user interface similar to the image linked below: https://i.sstatic.net/vBIFP.png

With my current code setup, this is what I have been able to produce: https://i.sstatic.net/BP5dx.png

Here is the HTML code for what I have accomplished so far:

.slider-left {
  display: flex;
  align-items: center;
  p {
    font-size: 16px;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
  }
}

.slider-middle {
  display: flex;
  align-items: center;
  word-break: break-word;
  h1 {
    font-weight: bold;
    color: blue;
  }
  h2 {
    text-transform: uppercase;
    font-style: italic;
    font-size: 16px;
    font-weight: normal;
  }
}

.v-center {
  width: 500px;
  height: 1000px;
  display: flex;
  align-items: center;
}

.slider-image {
  width: 100%;
}

.slider-right {
  padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <!-- Left most text -->
    <div class="col-lg-1 slider-left text-right">
      <div class="container center-align">
        <p>Publication</p>
      </div>
    </div>
    <!-- Middle Text -->
    <div class="col-md-4 slider-middle center-align">
      <div class="container">
        <h2>title2</h2>
        <h1>title1</h1>
        <p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
        <a></a>
      </div>
    </div>
    <!-- Carousel Image -->
    <div class="col-md-7 slider-right">
      <img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
    </div>
  </div>
  <div class="row">
    <div class="col-5 slider-nav">
      <p>navigation</p>
    </div>
  </div>
</div>

I am required to utilize bootstrap for any UI design as per my supervisor's advice regarding website responsiveness. The issue lies in the containers repeatedly moving rather than staying fixed. Any guidance or explanation on how to rectify this would be greatly appreciated. Additionally, if anyone has knowledge on inserting custom buttons and pagination within the navigation bar, please share your insights. I would be extremely grateful for any help, though I haven't delved too deeply into these elements. Cheers :)

htmlcssbootstrap-4slick.js

Answer №1

Is this the type of layout you had in mind?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div class="col-sm-4" style="background:#f2f2f2;">
        Publication
      </div>
      <div class="col-sm-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12" style="background:red;">navigation</div>
    </div>

  </div>

  <div class="col-md-6 col-sm-12" style="background:#999;">
    Image
  </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

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

javascripthtmlcssreactjsbootstrap-4

Arrange divs adjacent to each other without any gaps in between

My HTML code includes elements from Twitter Bootstrap and AngularJS framework. <div class="item item-custom-first"> <select class="form-control" style="display:inline; float:right" ng-model="requestdata.units ...

javascripthtmlcsstwitter-bootstrap

Guide on showing the D3 Color legend in a horizontal orientation instead of a vertical one

I'm currently in the process of creating a color legend using d3, and I've managed to display it vertically. However, I would like it to be shown horizontally instead. Below is a snippet of the code I've been working on along with a link to ...

cssd3.jslegend

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

htmlformsangularangular-forms

Master br tag in HTML: a complete guide

I am currently struggling with understanding how to correctly use the line break tag in HTML. During a recent class test, we were tasked with identifying issues within an HTML script, and I mistakenly believed that < /br> was incorrect. I am unsure ...

html

Tips for transferring information from a form to your email address

I am trying to find a way to automatically send form data to my email without the user having to open their inbox. I attempted to use the "mailto" function but it didn't work as desired, still opening the email box. Here is the script I tried: functio ...

javascriptphphtmlemailmailto

Does anyone know of a tool that allows you to save HTML as a standalone page?

Looking for a solution to easily send standalone .html files with no external dependencies to clients on a regular basis. The original pages are built using node.js and express, and feature libraries like High Charts. Up until now, I have been manually pre ...

javascriptjquerypythonhtmlblob

Always maintaining a responsive and square aspect ratio div

I am developing a CSS and JavaScript-based game that requires the game field to be square and adjust its width and height based on the height of the viewport. In case the viewport width is smaller than the height, I need the field size to adapt while maint ...

htmlcssresponsive-design

What is the best way to place a background image at the top left and bottom right corners of an HTML element?

I have a paragraph and I would like to visually mark the beginning and end of the paragraph for the user. I have successfully displayed a background image in the upper left corner, but I am unsure how to position the background image in the lower right co ...

javascripthtmlcssbackgroundbackground-image

having difficulty configuring gwt-button's corners to be rounded

Hey there, I'm having an issue with a button in my GUI that I created using GWT. I'm trying to round the corners of the button, but using border-radius doesn't seem to have any effect on its appearance. The style sheet I'm using is "co ...

javahtmlcssgwtstylesheet

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Imagine you have an iframe on your webpage: <iframe style="border-radius:15px;" width="190" height="450" frameborder="0" scrolling="no" marginheight="5" marginwidth="10" src="../img/interactive_map/interactive_sverige.htm"> </iframe> ...

jqueryhtmlcssiframeinteractive

Unable to retrieve the value of the concealed tag

Here's the code I'm working with: <html> <head> <script type="text/javascript"> var x = document.getElementById("2").value; document.getElementById("1").innerHtml = x; </script> </head> <bo ...

javascripthtmlhidden

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Styling Lists: How to Create a Second Line Indent with Counters

There seems to be an issue with the second line indent when using a custom counter. When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example: ol { counter-reset: ci-counter; list-style- ...

htmllistcsshtml-lists

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

javascripthtmlangulartypescript

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

javascriptjqueryhtmlcss

Tips for utilizing the if-else directive in an AngularJS controller

My current challenge involves HTML coding. <li><strong>Scrub:</strong> {{insuredProfile.permanentAddress.isScrubbed}}</li> This code displays either true or false. I want to show Yes for true and No for false. Using data-ng-if, ...

htmlangularjs

Is there a way to horizontally align text in a div using center alignment?

Excuse me for what might seem like a silly question, but I am having trouble figuring this out. Edit: All I want is to horizontally center the text without affecting the image's position. The image should stay aligned with the baseline of the text. ...

css

Calculating totals in real-time with JavaScript for a dynamic PHP and HTML form that includes quantity,

I have created a dynamic form with fields and a table that adjusts based on the number of results. Each column in the form represents name, quantity, price, and total price. The PHP and SQL code runs in a loop to populate the list depending on the number ...

javascriptphphtmlmysqldynamic