I have a table-like structure, where the first <div class="row">... behave as the header for the table.
I am trying to make it fixed, so when I scroll down the page, users can still see the columns headings.
I gave it position:fixed, which achieves that, but now, the width of the columns is trashed.
<div class="container">
<div class="row" style="position:fixed;">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<!-- some data -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
</div>
I really needs this to work on Chrome/FF/Safary. IE is not a concerns
Try it
<div class="container" style="position: fixed">
EDIT: I create simple example at http://jsfiddle.net/ytJV7/2/
There is also sticky-top class in bootstrap CSS
Fiddle with example
<div class="container">
<div class="row sticky-top bg-white">...
Related
I'm trying to create a layout that looks like the component on the image.
It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.
I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.
How would one achieve this type of a layout using Bootstrap 4?
Image:
Existing code:
<div class="info-side">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1">
</div>
<div class="col-5">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
try this
<div class="info-side" >
<div class="container">
<div class="row col">
<div class="col-6 bg-info">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1 bg-warning">
</div>
<div class="col-5 bg-info">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
I added col to class row #div tag. It expands to all space available.
In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class.
See this answer: link
Good Luck!
I've come to the following solution which creates the layout in my original image in the question.
I had to make one row position absolute, this way the two containers are overlapping each other.
<div class="info-side">
<div class="text-side container" style="position: relative;" >
<div class="text-area" style="position: absolute;">
<div class="row">
<div class="col-6 d-flex align-items-center" style="height: 600px;">
<div class="text-items">
<h2>#Model.TitleText</h2>
<p>#Html.Raw(Model.AreaText)</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-side container-fluid">
<div class="row">
<div class="col-7"
<div class="col-5" style="height: 600px; ">
<img src="#Model.Image.Url" alt="#Model.Image.AlternativeText">
</div>
</div>
</div>
</div>
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I am just beginning to learn to code. I am using Skeleton boilerplate to build a responsive template. I am struggling to understand, how to make two items appear on the same row. below is my code for this.
<div class="header">
<div class="container"
<div class="row">
<div class="three.columns"><img src="/image/file">
</div>
<div class="nine.columns">Headline</div>
</div>
</div>
`
">" is missing from the container div.
This would be the correct code:
<div class="header">
<div class="container">
<div class="row">
<div class="three columns"><img src="/image/file"></div>
<div class="nine columns">Headline</div>
</div>
</div>
</div>
I have a container that contains two rows. I want there to be a border around the container (not between the two rows). When I tried to set a border around the container, it gave me a border between the two rows - not sure what I should be doing differently here.
<div class="container-fluid" style="border:1px solid #cecece;"
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
Your code is almost perfectly fine.
Look at first line of it - > is missing.
See working example below.
http://jsfiddle.net/864cw2fn/
<div class="container-fluid" style="border:1px solid #cecece;">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
<div class="container-fluid table-bordered">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
</div>