I have 3 elements and I am trying to align the button to the right side of the screen, but am having trouble doing so.
<div class="container">
<div class="row-fluid">
<h4>
<img src="img.png" style="width:50px;">
Title
Grab it!
</h4>
</div>
</div>
Try the class 'pull-right'.
<div class="pull-right">...</div>
See http://getbootstrap.com/css/#helper-classes-floats
try something like this
<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>
Utilise justify-content-end
From the bootstrap documentation, it says:
Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.
Bootstrap 4 uses the various helper classes.
(Alignment part)
https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm
and here more info about the new alignment
https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div class="wrapper justify-content-end">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>
https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue
In Bootstrap v4:
<div class="float-right">Float right on all viewport sizes</div>
Bootstap v4 docs
In Bootstrap v5:
<div class="float-end">Float end on all viewport sizes</div>
Bootstrao v5 docs
Related
I want to achieve the following layout on desktop:
[1][2]
[3][2]
I need column 2 to be the height of 1 and 3 on desktop.
Then on mobile I want it to look like:
[1]
[2]
[3]
I tried 2 options:
Option 1:
<div class="row">
<div class="col-md-7">
<span>1</span>
</div>
<div class="col-md-5">
<span>2</span>
</div>
<div class="col-md-7">
<span>3</span>
</div>
</div>
The problem is that block 2 is the height of block 1 only.
Option 2:
I thought about using column ordering to insert block 2 between block 1 and block 3:
<div class="row">
<div class="col-md-7">
<div>
<span>1</span>
</div>
<div>
<span>3</span>
</div>
</div>
<div class="col-md-5">
<span>2</span>
</div>
</div>
But I don't think it's possible this way.
Is there another method I didn't think about? or is it possible using one of the methods above?
Thanks.
try something like this
#flex_box1 div
{
width:100%;
height:150px;
border: 2px solid #555;
margin-bottom:15px;
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
width:100%;
height:100%;
background-color: #555;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 d-flex flex-column" id="flex_box1">
<div></div>
<div></div>
</div>
<div class="col-8 " id="flex_box2">
<div></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I can suggest you to use library called Masonry. It is quick and easy to implement. Link: https://masonry.desandro.com/
With this you can get desired result for both desktop and mobile version as you mentioned.
Demo:
https://codepen.io/Bibeva/pen/qBExWjj
HTML:
<!-- bootstrap 4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row grid">
<div class="col-md-6 grid-item">
<span>1</span>
</div>
<div class="col-md-6 grid-item grid-item-box">
<span>2</span>
</div>
<div class="col-md-6 grid-item">
<span>3</span>
</div>
</div>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- masonry js cdn-->
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.js"></script>
<!-- custom js -->
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
</script>
CSS:
.grid-item {
background: #000;
color: #fff;
height: 100px;
}
.grid-item-box {
height: 200px;
background: #333;
}
.container1{
display:inline-flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
position: relative;
}
.container1 div {
height: 50vh;
width: 200px;
margin: 0;
border: 1px solid black;
color: #fff;
text-align: center;
align-items: center;
display: inline-flex;
justify-content: center;
font-size: 50px;
font-weight: bold;
}
.div1 {
background: #f60;
}
.div2 {
background: #f55;
height: 100vh!important;
}
.div3 {
position: absolute;
bottom: 0;
left:0;
background: #0ae4dd;
}
<div class="container1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
<pre>
**For Mobile View**
#media(max-width: 992px){
.container1{
flex-wrap: wrap;
width: 100%;
max-width: 100%;
}
.container1 div {
width:100%;
height: auto;
}
.div2 {
height: auto!important;
}
.div3{
position:inherit;
}
}
</pre>
If someone will need a solution in the future, I ended up using flex-direction: column and put height on the container:
HTML:
<div id="flex-container" class="row flex-lg-column">
<div class="col-12 col-lg-6 order-1">
<span>1</span>
</div>
<div class="col-12 col-lg-6 order-3">
<span>2</span>
</div>
<div class="col-12 col-lg-6 order-2">
<span>3</span>
</div>
</div>
CSS:
#media (min-width: 992px) {
#flex-container {
max-height: 40rem;
}
#flex-container .order-1,
#flex-container .order-2,
#flex-container .order-3 { order: initial; }
}
And becuase Bootstrap 4 .row has flex-wrap: wrap, block 3 will wrap to the right side of the two blocks on lg screens.
This question already has answers here:
Center image using text-align center?
(28 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 4 years ago.
I was told to put a working code up that's why I have so much code up here but the part I am trying to focus on is aligning the top "resumania" logo in the center. When I put align: center; or text-align: center; it won't align. The class I am using for that is "logo." What am I doing wrong ??
<!DOCTYPE html>
<html>
<body>
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--NEED HELP RIGHT HERE-->
</head>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>
</body>
<style>
a {
color: #2d2d2d;
}
.logo{
width:200px;
border-radius:10px;
text-align: center;
}
.box{
width:100%;
background-color:#f6f6f6;
}
.heading{
color:navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
</style>
</html>
One way is to wrap the <a> with a block element, like a <div> then you can use text-align:center
a {
color: #2d2d2d;
}
.wrapper {
text-align: center;
}
.logo {
width: 200px;
border-radius: 10px;
}
.box {
width: 100%;
background-color: #f6f6f6;
}
.heading {
color: navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrapper">
</div>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
You can give the css property display:flex; align-items:center to your parent class (ie) for class "box"
try this.if you give the class logo for the a tag i mean the parent of your logo image that will be much better otherwise the a tag will be full width.
.logo {
width: 200px;
border-radius: 10px;
margin: 0 auto;
display: block;
}
You may refer to this jsfiddle.
enter code here
I'm working on learning bootstrap and I would like to have a website with a header, a footer, and three middle columns. So far I have the header and columns, but I'm not fully understanding how to make the the footer, and I'm pretty sure I did it the wrong way, but I would like some assistance figuring it out. I tried putting it in a div and changing the width to 100 vw and I'm just not fully understanding it. The header is basically just the container fluid part on top and I made a div for the footer but the edges still are the color of the container, So I guess my question is: what is the exact purpose of container and container-fluid and how do I make the footer div take up the whole space? Thanks, Code is:
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
container-fluid takes the full width of the screen while container has fixed size for each resolution.
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
position: absolute;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
I'm trying to make two full height bootstrap columns like the example here : Twitter bootstrap 3 two columns full height
But the problem is that it show me the first column content (col-md-2) after the second one content (col-md-10).
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
html,body,.m-container
{
height:100%;
}
.m-container
{
display:table;
width: 100%;
margin-top: 50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
float: none;
}
.col-md-2
{
float: none;
display: table-cell;
background: pink;
}
.col-md-10
{
display: table-cell;
background: yellow;
float: none;
}
</style>
</head>
<body>
<header>Header</header>
<div class="m-container">
<div class="row">
<!-- Data sources accordion -->
<div class="col-md-2">
<div class="well">I'm another well</div>
</div><!-- /end of col -->
<!--
Wall of panels
-->
<div class="col-md-10">
<div class="col-md-6">
<div class="well">I'm the first well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the second well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the third well</div>
</div>
</div>
</body>
</html>
I'm trying without using col-md-6 in the col-md-10 part and it works, but i should use col-md-6
Someone have an idea why i have this problem?
Above the JSFiddle link to my code
JSFIDDLE Code