container-fluid with container inside in only one node in Twitter Bootstrap - html

It's possible to accomplish this with Twitter Bootstrap:
<div class="container-fluid">
<!-- FULL BACKGROUND -->
<div class="container">
<!-- CONTENT CENTERED -->
</div>
</div>
But with only 1 div?
<div class="container-semifluid">
<!-- CONTENT CENTERED WITH FULL BACKGROUND -->
</div>
The objective is to have a fluid background and center the content as if it was a "container". I have the 1 div restriction.

Related

flex box inside a flex box with scroll overflow?

I've looked at the similar questions that came up from this title, but they're not quite the same issue I'm having.
https://jsfiddle.net/kx4q1ut8/1/
<div style="display:flex;flex-direction:column;height:100vh;background:gray;">
<div style="background:red; width:100vw;min-height:80px;">Header</div> <!-- Header -->
<div style="background:green;width:100vw;flex-grow:1;display:flex;flex-direction:row"> <!-- outer body container -->
<div style="background:blue; width:140px;height:100%;"></div> <!-- side bar -->
<div style="background:yellow;height:100%;flex-grow:1;display:flex;flex-direction:column"> <!-- inner body container -->
<div style="background:gray;width:100%;height:200px;"> <!-- filter panel -->
</div>
<div style="background:cyan;width:100%;flex-grow:1;overflow:scroll"> <!-- table panel -->
want this content scrollable if beyond bottom of page
</div>
</div>
</div>
</div>
All the areas are fixed sizes except for the cyan area. I need that area expandable to match the rest of the window height. What I also need is for that area to have scrollable content but can't seem to work that part out completely. If you fill the area with enough text it'll get a scrollbar but I think that container is expanding beyond the bottom of the page because I can't fully scroll to see the end of the off-screen content. The layout is for a web application.

Place an element in bootstrap gutter

Bootstrap 4.4.1
How do I place an element a button or any clickable in the gutter between two bootstrap columns.
I have a two panes UI — a left-aside and the main right section, in bootstrap grid columns.
I want to collapse the left aside section via a button in the gutter of the
I was thinking and have tried an absolute div — but to no avail!
<div class="row">
<aside class="col-md-4">
<!------ absolute here -->
</aside>
<div class="col-md-8">
</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.

Can't horizontally split a bootstrap row

So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image

div not expanding to full height of background image

I am using bootstrap and want a full width div to go 100% height on a background image. I can't figure out why its collapsing to just the line height. Any ideas? See fiddle:
http://jsfiddle.net/aartese/3kRVm/
<body>
<row><!--landing section -->
<div class="col-md-12 landing">Landing</div>
</row> <!-- /landing section -->
<row><!--about section -->
<div class="col-md-12 about">About</div>
</row><!-- /about section -->
<row><!-- professional profile section -->
<div class="col-md-12 professional">Professional</div>
</row><!-- /professional profile section -->
<row> <!-- contact section -->
<div class="col-md-12 contact">Contact</div>
</row> <!-- /contact section -->
</body>
Is that what you meant? The basic concept is copied from Ryan Fait's sticky footer. It basically revolves around ensuring that all the parent elements' min-height and height are 100%