Bootstrap 5: Table in a second column jumps below the first column - html

I have a grid layout with some navigation pills in the left column set to "col-auto" because I want these to only take up the space of the content's natural width.
In the second table I want to have a large table with horizontal scrollbar. I'm able to achieve this except the table always jumps below the navigation bar and I can't get it to be rendered to the right.
See in the attached fiddle: https://jsfiddle.net/3vxhd6jf/3/
<div class="container">
<div class="row">
<div class="col-auto"> <!-- Should only take up the necessary space -->
<!-- Nav tabs -->
<div class="d-flex align-items-start">
.....
</div>
</div>
<div class="col"> <!-- Should take up the rest of the space -->
<div class="tab-content">
<div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
<div id="div-data-container" class="mb-3 table-responsive">
<!-- The table -->
<table class="table table-sm table-striped">
.....
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to achieve is to render the table to the right of the navigation pills, just like the textarea is rendered when you click the 'JSON' pill.
Can you please help?

Rows in Bootstrap are flex containers that allow wrapping by default. If you want to force your columns onto the same line, you need to prevent that wrapping.
Apply the flex-nowrap class to your row:
<div class="row flex-nowrap">
With everything on one row, you'll find the size of the table causes it to overflow. You're already utilising Bootstrap's table-responsive class. Put overflow-hidden on the column containing the table to keep the content within the row.
<div class="col overflow-hidden"> <!-- tab content / table markup / etc -->
Further reading: https://getbootstrap.com/docs/5.0/utilities/flex/#wrap

Related

Bootstrap grids responsive

I have a 3 column layout with the code here for example. Right now when the browser window gets smaller it stacks from the 1st column on top, 2nd in the middle and then 3rd is last as expected. I want the columns to behave this way when the columns get smaller.
First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top.
Second- This column is on bottom.
<div class="row">
<div class="col-sm-3">First</div>
<div class="col-sm-6">Second</div>
<div class="col-sm-3">Third</div>
</div>
Use .order- classes for controlling the visual order of your content.
<div class="container">
<div class="row">
<div class="col-sm-3">
First, but unordered
</div>
<div class="col-sm-6 order-12">
Second, but last
</div>
<div class="col-sm-3 order-1">
Third, but first
</div>
</div>
</div>

Bootstrap 4 grid issue

I'm having some problems of respecting the grid of bootstrap 4. I have a content of col-sm-9 and a right sidebar of col-sm-3 float-right. But the sidebar does not start from the top, but start just after the end of col-sm-9. I would like to align both the column.
Here is how the page it is looking:
Here you can inspect the code of the page: Code
This is basically my html:
<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
<div class="content-featured-image">
<img>
</div>
</div>
<div class="clearfix"></div>
<div class="gs-track col-sm-9"><!--start player-->
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->
</section>
I was able to align the sidebar to the content but I had to move the sidebar box before the player, and I don't want to have this behaviour.
It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
<div class="row">
<div class="col-sm-9">CONTENT</div>
<div class="col-sm-3">SIDEBAR</div>
</div>
Try it and let me know if it works.

Bootstrap row still creates gap on right even there are columns inside

I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.

Unfixed div overlapping fixed div on bootstrap 3

I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!

Single full-width column in row with twitter bootstrap grid

When using bootstrap's grid, what is the best way to markup a single full-width column in a row?
Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > .actual-content), or can you get rid of the row and column altogether and simply use a wrapping container (.container > .actual-content)?
Let's say
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<div class="row">
<div class="col-xs-12">
<p>Actual content goes here. It will span the entire width.</p>
</div>
</div>
<div class="row">
<!-- multiple columns -->
</div>
</div>
vs
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div>
</div>
Is one approach considered superior over the other? Since the column spans the entire width for all media sizes, I don't need any responsive features. Rendered output should be the same, but maybe there are subtle differences which I'm not aware of. Using container, row, and column seems like overkill …
The one without the row/grid according to Bootstrap's own documentation. It is the correct way -- don't wrap it with more classes, that's more markup for NO reason.
I posted about this a couple days ago: col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3
Documentation:
No grid classes are necessary for full-width elements.
This is the correct way:
<div class="container">
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
</div><!-- closing .container -->