Im trying to copy the following picture with bootstrap
Here's the link if you want to see it https://slack.com/create#teamname
The image does fit the entire page, even though you scroll down , it won't show any extra picture, while mine does have.
My attempt is
<body>
<div class="container">
<div id="Page1">
<h1>Full Name</h1>
<div class="row">
<div class="col-md-5">
<h1></h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control">
Show page 2
</form>
</div>
<div class="col-md-7">
<img src="/img/space.jpg">
</div>
</div>
</div>
</div>
</body>
I add some custom css to the image
img {
width:100%;
height:730px;
}
and I got the following the result
How do i match the first picture in code?
I'm not a frontend guy , if anyone could help me would be really helpful.
Here's the JSFIDDLE --> https://jsfiddle.net/3soreoac/
http://codepen.io/anon/pen/wKQQxb
<div class="left col-md-6"></div>
<div class="right col-md-6"><img class="full" src="https://slack.global.ssl.fastly.net/66f9/img/signup/step1-illi#2x.png"></div>
.rightfull {
width: 100vh;
height: 100vh;
}
.left {
background-color: blue;
}
.right {
background-color: green;
}
This may help
HTML
<div class="container">
<div id="Page1">
<div class="row">
<div class="col-md-5 col-xs-5 leftpanel">
<h1>Full Name</h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control"> Show page 2
</form>
</div>
<div class="col-md-7 col-xs-7">
<img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
</div>
</div>
</div>
</div>
CSS
img{
width:100%;
height:732px;
}
.leftpanel{
background-color:grey;
height:732px;
}
Fiddle:here
Related
I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar.
the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)
my code:
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
whenever i scroll the page, i want to always see on the top right corner the app navbar.
thanks!
this is what solved the issue for me:
<div class="row">
<div class="app-wrapper">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
</div>
</div>
and the css:
.sticky {
position: sticky;
top:0;
z-index: 999;
}
You can try using the overflow: auto for content wrapper only
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8 content">
<div class='col-md-12 wrapper'>
Content
</div>
</div>
<div class="col-sm-4 col-md-4">
Sidebar
</div>
</div>
</div>
.content {
max-height: 100vh;
overflow: auto;
}
.wrapper {
height: 800px;
}
Let me know for more details
Try use fixed
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="nav-sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
And in css:
.nav-sticky{
position: fixed;
top: 0;
height: 100%;
overflow:hidden;
}
Add this property to your app container
min-height:100vh;
max-height:100vh;
overflow:scroll;
Give position:fixed to your row.
Added header to my sample as well.
.app {
min-height: 100vh;
max-height: 100vh;
overflow: auto;
background: red;
color: white;
}
.row {
position: fixed;
width: 100%;
}
.header {
height: 50px;
background: blue;
color: white;
}
.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 header">HEADER</div>
<div class="col-sm-10">
<div class="col-sm-8 app">
APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
</div>
<div class="col-sm-4 navigator">
NAVBAR
</div>
</div>
</div>
</div>
I am trying to display three image in same row
for that i am using
<div ng-repeat="p in imageses">
<div class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
this is showin only one image at a line i want to show three images per line
Try this.
<div class='row'>
<div ng-repeat="p in imageses" class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The basic structure should be following:
<div class="container"><!--use container-fluid if you want full width-->
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
For better clarification please check their doc
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
I am trying to build a bootstrap calculator using the grind system provided by Bootstrap. I have two rows using the class col-md-4 with each row comprising of 4 buttons. I would expect to see the buttons expand the entire width of the div tag. When I put a background color to the div tag the color fills the entire div tag, as I would except. I created a codepen to illustrate my problem.
<div class="container">
<div class="cal-body">
<div class="header">
</div>
<div class="lcd">
</div>
<div class="row">
<div class="col-md-4">
<button>7</button>
<button>8</button>
<button>9</button>
<button>%</button>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-bottom: 20px;">
<button>4</button>
<button>5</button>
<button>6</button>
<button>X</button>
</div>
</div>
</div>
</div>
</div>
In other words, I would like my buttons to take of the full length of the column row. As of now, it only takes 1/4 of the column space. I am trying to replicate the look of a calculator.
My code pen:http://codepen.io/louis345/pen/KNoypX
Any help will be greatly appreciated.
Just change the col-md-4 to col-md-12 if you want to span the whole row.
You can also add class text-center into your columns to make buttons centered position.
Sample:
<div class="col-md-12 text-center">
</div
Check this to see if that's what you are looking for
The idea is to wrap each button on a different column
<div class="col col-sm-3">
<button>7</button>
</div>
#claudios your answer is right [ use class (text-center) ] and I am just implement in this snippet.
.line{
box-shadow:inset 0px 0px 2px #ccc;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center line">
<button class="btn btn-success">Submit</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</div>
Each row has 12 columns, you're setting a div to use 4 columns and it will make the div to use 1/3 of the size.
Also, col-md must be used to sizes >= 768px. You should use col-xs because you're limiting the size of cal-body.
I made it, based on your codepen: http://codepen.io/anon/pen/BQMeXQ
Take a look here, 2 rows, each one has 4 divs, each using 3 columns.
<style>
.button-group {
width: 100%;
margin-left: 15px;
}
.button-line {
width: 100%;
}
.button-col {
padding-left: 0px;
padding-right: 0px;
}
.button-col button{
width: 100%;
}
</style>
<div class="button-group">
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>7</button>
</div>
<div class="col-xs-3 button-col">
<button>8</button>
</div>
<div class="col-xs-3 button-col">
<button>9</button>
</div>
<div class="col-xs-3 button-col">
<button>%</button>
</div>
</div>
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>4</button>
</div>
<div class="col-xs-3 button-col">
<button>5</button>
</div>
<div class="col-xs-3 button-col">
<button>6</button>
</div>
<div class="col-xs-3 button-col">
<button>x</button>
</div>
</div>
</div>
I would like to combine div table with Ajax.BeginForm:
and what it outputs looks like this:
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<div class="Row" id="Row_1">
<form>
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
<div class="Row" id="Row_2">
<form>
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
Demo
But each row is display only in the first column. How can I fix that?
Thx
Remove the Row divs and promote your forms to have the .Row class
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<form class="Row" id="Row_1">
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
<form class="Row" id="Row_2">
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
replace cell class from css with
.Cell
{
float:left;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width: 200px;
}
check example here