0

I know how I would like my UI to look and I have managed to sketch it with pure css grid layout. Preview: https://jsfiddle.net/oa5t3m14/

https://i.stack.imgur.com/PeVOy.jpg

Code below:

<html>
<head>
    <style>
        html,
        body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        div {
            border-style: solid;
            border-width: 1px;
            padding: 10px
        }
        textarea {
            border-style: none;
        }
    </style>
</head>
<div
    style="display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr 12fr 1fr; grid-gap: 10px; width: 100vw; height: 100vh; border-style: none; border-width: 0px; padding: 0px">
    <div style="grid-column: 1 / span 2; grid-row: 1">Link1 Link2 Link3</div>
    <div style="grid-column: 1; grid-row: 2">Text area title 1</div>
    <div style="grid-column: 1; grid-row: 3">
        <textarea style="resize: none; height: 100%; width: 100%;" class="p-3" placeholder="Text area 2"></textarea>
    </div>
    <div style="grid-column: 2; grid-row: 2">Text area title 2</div>
    <div style="grid-column: 2; grid-row: 3">
        <textarea style="resize: none; height: 100%; width: 100%;" class="p-3" placeholder="Text area 2"></textarea>
    </div>
    <div style="grid-column: 1 / span 2; grid-row: 4">Footer</div>
</div>
</html>

But I would like to use use Bootstrap as much as possible. I have tried to recreate the same design with Bootstrap but with no success. I followed this advice: How can I get a Bootstrap column to span multiple rows?

I bet there is a quite obvious solution to this but I'm new to the web design and it got me stuck.

Marcin
  • 1
  • 1

0 Answers0