I have the following code:
<div class="col-xs-12 fixedContainer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Smith Service</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" ng-controller="ServiceStatus as serviceStatus">
<!--Iterates over the services-->
<div class="col-lg-3 col-md-6" ng-repeat="service in serviceStatus.services">
<server-status name="service.name" status="service.status" nodes="service.nodes"></server-status>
</div>
</div>
</div>
</div>
<ng-view></ng-view>
I want to fix the div that has the fixedContainer class always on top. Inside ng-view there is a table, with scrollable data.
I define fixedContainer class as:
.fixedContainer {
position: fixed;
z-index: 1030;
top: 0;
}
but ng-view stay below the container, something is missing.
Can you help me?
Thanks.
Related
I want to align this link to right bottom. I already tried adding the below CSS but it only align in the container. I want it to be align in the hero-area.
.rt {
position: absolute;
right: 0px;
bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Please check following, as i have changed container to container-fluid because you want it under hero-area.
a.hero-btn {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Add Bootstrap's position:relative class, position-relative to your hero's classes:
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Absolutely positioned elements are positioned with respect to their closest positioned (non-static) ancestor, so setting position: relative on the hero makes the x move in relation to it instead of the body.
Yor master div position is up-left for fixing this problem you most give rt class to your master div.
Example
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>
Or you most give all page space to div
I'm trying to make a grid-layout with BS4.
This is how it looks right now:
My grid-layout
This is what I'm trying to achieve: grid-layout I want
The problem I have is that my sidebar is starting at the same place as main content. I want it to start from the top along with the navbar. I know you can do this if you nest navbar and main content into the same column, but I don't want that since I'm going to make navbar into a partial.
HTML:
<div class="container">
<div id="wrapper">
<div class="row">
<div id="navbar" class="col-md-8">
Navbar
</div>
<div id="main" class="col-md-8">
Main Content
</div>
<div id="sidebar" class="col-md-4">
Sidebar
</div>
</div>
</div>
</div>
CSS:
#wrapper{
height: 200px;
width: 400px;
}
#navbar{
background-color: yellow;
height: 50px;
}
#main{
background-color: blue;
height: 200px;
}
#sidebar{
background-color: red;
}
JSfiddle link
You should try to group columns by putting navbar and main-content in one column and the second column for sidebar.
<div class="row">
<div class="col-8 col-md-8">
<div id="navbar" class="col-md-12">
Navbar
</div>
<div id="main" class="col-md-12">
Main Content
</div>
</div>
<div id="sidebar" class="col-4 col-md-4">
Sidebar
</div>
</div><--row-->
working fiddle
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I have a div that goes to the edge with the browser and would ilke to add content that is aligned to the centered container in the center of the page. I've crated a row with a col-md-6 that I filled with a background color but when I add the container, the content gets aligned to the edge of the browser not to the container's edge.
I am using Bootstrap and really need your help. If I did not articulate the issue properly, I've attached an image that should help.
Thanks for your help.
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
Image shows the current situation and the desired situation
As you did a margin-top for the .login-msg-box, you could for example add a margin-left to your .container. Here's the result :
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
.container {
margin-left: 200px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
You can add any number of offset to div
<div class="row">
<div class="col-md-6 col-md-offset-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
I think you are looking for something like this https://jsfiddle.net/neya0v76/1/
I switch everything to xs so it looks right in the fiddle and just restructered your html
<div class="row">
<div class="col-xs-6 login-msg-box">
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<h2 class="msg-heading-line">LOG IN</h2>
<input type="text"/>
<input type="text"/>
</div>
</div>
</div>
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>