How would i do something like this? http://jsfiddle.net/BxaNN/369/
but with the top column in the center top?
NOTE: this is not my code
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>
The bootstrap classes you have already does this for you. You just need to reference the bootstrap cdn. You could also, center the text to make it pretty. check out the grid system here: Bootstrap Resource
.container {
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</div>
</div>
</div>
Related
I am trying to create a layout shown below:
C1 C2 C3
C4 C5 C3
C6 C7 C3
I am having trouble trying to have a column fill the height of all three rows.
This is the code I have tried.
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
with this css:
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
right: 0;
position: absolute;
}
This code doesn't work
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
}
.column{height:100px; line-height:100px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
.sidebar_div{height:320px; line-height:300px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c1
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c2
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c5
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c6
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c7
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sidebar_div">
c3
</div>
</div>
</div>
</body>
</html>
This fill surely helps you to get what your requirement was:
HTML:-
<section class="col-md-8">
<div class="col-md-6">CL1</div>
<div class="col-md-6">CL2</div>
<div class="col-md-6">CL4</div>
<div class="col-md-6">CL5</div>
<div class="col-md-6">CL6</div>
<div class="col-md-6">CL7</div>
</section>
<aside class="col-md-4">
<div class="col-md-12">CL3</div>
</aside>
Is this what you need?
.lgImage {
background-image: url('http://placehold.it/800x50');
right: 0;
position: relative;
width: 800px;
height: 50px;
}
.row.equal {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
My png images gets really small when I put them inside a column in a row. However they are fine when there is not column but then they do not appear as a row and appear one above the other. I have no idea what may be causing the problem.
What I want to do: I want them to appear like this.
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class=""> <!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
<p>Free Rides </p>
</div>
<div class="">
<img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
<p>Free XXX Membership </p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Sorry for bad english and indent.
Here is my CSS:
#parent {
text-align:center;
height:400px;
width:100%;
}
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}
.img-sec-4 {
height: auto;
width: auto;
}
EDIT:
Here is the screenshot of my result:
(The red highlighted area is where the problem is)
simply add class col-xs-6 to the div wrapping those images (each one)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-6">
<!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free Rides</p>
</div>
<div class="col-xs-6">
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free XXX Membership</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Help me, how to set each column same height? I have this structure:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
In this case, the content displayed is as follows:
But when I try to resize the browser window, the content is shifted wrong:
And so should:
How to fix it?
One way would be to add a clearfix that's only visible on the smaller viewports..
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
http://bootply.com/ZDDbPlCraT
create a custom css class in your .css file
.fixed-height {
height: 200px;
}
Then add this to your HTML as follows:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
</div>
</div>
I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)
The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>