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>
Related
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.
I'm trying to apply a margin to text within a div, to have text centered horizontally and vertically. I'm not sure if there's a better way to do this, as I'm very new to HTML and programming in general.
<!-- begin header -->
<header style="background-color:#8b0000" style="height:50px;">
<!-- frankenstien-ish bootstrap grid within a bootstrap grid -->
<div class="row">
<div class="col-md-6">
<!-- this div is a placeholder div and has no content -->
</div>
<!-- this div contains all of the navigation buttons in their own bootstrap
grid -->
<div class="col-md-6">
<p style="text-align:center;margin">Test Text</p>
<!-- I know the margin has no value right now. Read question -->
</div>
</div>
</header>
<!-- end header -->
When I try to apply a margin to the <p> element, the margin makes the header larger and doesn't affect the <p> element's margin. How can I center an element vertically and horizontally? (The <p> is a test. It will be replaced with a button)
From the comments in your code it's clear that you are trying to create some navigation buttons. I'm not sure about bootstrap but in general I prefer using list items when I build navigation buttons. The reason is its really easy to control, edit and understand the structure.
Coming to your question, flex box are very comfortable to center align contents inside another, but I will not prefer that in this use case instead go with an, <li>or <div> tag - > add the name inside and then set the gaps using padding.
<ul class="navbtn">
<li>button 1 </li>
<li>button 2 </li>
<li>button 3 </li>
</ul>
Now the CSS will be
.navbtn li {
padding : 10px 5px;
}
Play with the values as per your comfort
This will center align the text inside the box.
Using list item will be more conformable than anything else when it comes to adding navigation buttons.
I have page structured in three parts: left-sidebar, content and right sidebar
<div class="row">
<div class="col-lg-1 sidebar-left">
...(html content)
</div><!-- /.sidebar-left -->
<div class="col-lg-9 col-md-10 col-lg-offset-1">
...(html content)
</div><!-- /.col-md-9 -->
<div class="col-md-2 sidebar sidebar-right">
...(html content)
</div> <!-- /.sidebar-right -->
</div><!-- /.row -->
The problem ocurs when two elements are longer than screen height, and creates separate scrollbars for each elements. Any advice how to make the page with single scroll bar no matter the lenght of the elements?
screenshot of the problem:
This is a pure CSS problem. Both, left and right sidebar maybe have a height defined. So, when the children size exceed the defined height, the parent act. If has overflow: hidden, the exceed part is hidden, if has overflow: scroll or overflow: auto a scroll is added to view all elements.
You need to remove the fixed heights from both sidebars.
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.
Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?
You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
http://twitter.github.io/bootstrap/base-css.html#typography
In addition,
<p> (paragraphs) receive a bottom margin of half their line-height
(10px by default).