Hello. I have 3 rows in my website header. One has a h1 heading, and the two below that both have h7 headings. I would like to have a picture that sits along the right hand side of all three of these headings, but right now it is just extending the row.
The below image is how my page currently looks.
And this image is how I would like it to look:
How do I go about this?
P.S. The white lines are there to show the outline of each row, just for positioning purposes.
Being sure, not the only two solutiones, but that's what i would start with:
But as a quick start, i did it that way (i like grids ;-) )
Your solution isn't using rows or columns, though, @RalphJK.
@Drenger
right - but i guess, the main target - an image in the height of the 3 rows - is reached. ZThat's what i suppose he wanted...
And of course you have got 3 rows you can use, what you need for... It's not using Bootstrap- pre-defined ROWs - but - as written: ONE solution USING GRID.
Ralph
I am getting the same issue:
My code:
.logobox {
display: block;
grid-column: 2;
}
#logo {
position: relative;
height: 12rem;
}
<body>
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light img-overflow">
<div col>
<h1>stuff</h1>
</div>
<div col>
<div class="logobox">
<img src="dp.png" />
</div>
</div>
</div>
<div class="row pt-0 pb-0 pl-3 pr-3 bg-dark text-light">
<h7>stuff</h7>
</div>
<div class="row pt-0 pb-3 pl-3 pr-3 bg-dark text-light">
<h7>stuff.</h7>
</div>
<hr/>
<div class="p-3 row bg-dark text-light">
<table class="table">
<tbody>
<tr>
<th style="font-weight: bold;">Introduction.</th>
</tr>
<tr>
<td>sttuff
<br/>
stuff.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
OK. IT is possibly. Of course.
I solved it, by using the bootstrap pre-defined classes, but not all the Pre-Defined Components of Bootstrap Stduio: enter link description here enter link description here
I took simple <div> and set the class="row" of bootstrap, modfiied the Settings in BS GUI
First of there is not a h7 element it's h1-h6.
Second, to do what you want I would have probably started with the following, 1 row / 2 columns, in first column add a row and then 3 columns in that row. The second column of the first row is where you'd put your image.
<div class="row">
<div class="col">
<div class="row">
<div class="col-sm-12">Heading 1</div>
<div class="col-sm-12">Heading (6)</div>
<div class="col-sm-12">Heading (6)</div>
</div>
</div>
<div class="col-sm-12 col-md-4">image here</div>
</div>
I'd actually set the second and third columns as H2's then add the class h6 which will give you the appearance of the smaller heading size but be correctly outline standardize.
Saj
Ah didn't notice you wanted the image to be positioned over the top of the those column lines. Is that still something you want or is that something to just give an idea of where you wanted the image to appear in relation to the columns? I mean as in are the column border intended to be visible or was that just a visual for the description of what you are trying to do?
Saj
After reading your post again and the other posts, it seems that using the apps drag/drop tools, my solution appears to be what you wanted. While you can use CSS Grid, if you wanted the bootstrap functions, CSS Grid isn't the way.
Saj