Bootstrap Navbar in a customized table - html

Question

I am trying to create a header on a website that consists of a table with two columns.
The column on the left should have an only row with the Logo, instead, the column on the right should have two rows.
The first row should have the contacts of the socials ,
while the second and final row should have a responsive navbar ( aligned on the right obviously ).
Is it possible to obtain this with Bootstrap?
One solution I thought about could be a table with two columns, with the row on the left consisting of the logo, and the row on the right that consists of the socials links.
Then below that table I would implement the usual responsive navbar.
Obviously I rather prefer to implement the first solution, but if a solution with Bootstrap is not possible I will probably go for the second solution.
I would gladly appreciate any advice or comment that is positive toward that goal.
Thank you so much for your time!
This is the code I got so far:
<tc>
<tr>
<th>Image</th>
</tr>
</tc>
<tc>
<tr>
<th>Social</th>
</tr>
<tr>
<td>
<nav class ="navbar navbar-dark bg-dark navbar-expand-sm ">
<button type = "button" class="navbar-toggler" data-toggle="collapse" data-target="#topNav"> <span class="navbar-toggler-icon" ></span> </button>
<div id="topNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"> Home </li>
<li class="nav-item">I nostri gelati</li>
<li class="nav-item"> La nostra storia</li>
<li class="nav-item"> Perchè così buono</li>
<li class="nav-item"> Trovaci </li>
</ul>
</div>
</nav>
</td>
</tr>
</tc>
</table>

Answer 1

Here's a pure Bootstrap solution to get you started:
https://codepen.io/panchroma/pen/djaNgo
The simplified code showing the grid layout is
<div class="container">
<div class="row">
<div class="col-md-3">logo</div>
<div class="col-md-9">
<div class="container">
<div class="row justify-content-end">social links</div>
<div class="row justify-content-end">
<!-- navbar here -->
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- col-md-9 -->
</div> <!-- row -->
</div> <!-- container -->
As you can probably see, if you want to build this using native Bootstrap classes you would have a row with two columns.
The left-hand column holds the logo, and then in the right-hand column you have a nested container which has rows for your social links and your navbar.
I've used the class of .justify-content-end to right-align the social links and the nav-bar.
I hope this helps!