I'm having trouble vertically centering both my text id="WhatIsMasterRow" and image id="WhatIsMasterPhoto. I've tried wrapping it in a .container and using the bootstrap center-block, as well as some other centering classes.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- What is Master Page -->
<div class="row" id="WhatIsMasterRow">
<div class="col-md-6" id="WhatIsMasterText">
<div class="row-text", id="SubHeaderTextLeft"> What is a Master? </div>
<div class="row-text", id="RegularTextLeft"> Test Text </div>
</div>
<div class="col-md-2 col-md-offset-2 center-text">
<img id="WhatIsMasterPhoto" src="Resources/Images/Peter-Limmer-boots-2.jpg">
</div>
</div>
</body>
I've tried using margin: 0 auto; as well, but it's not working.
.col-md-2 {
margin: 0 auto;
background-color: black;
}
Related
Here is how the blocks are positioned on desktop within a row class which looks good on desktop.
Unfortunately, on xs device this looks not the way we need. I need this order when it's displayed on extra-small device:
1
3
2
Solution that doesn't work: I can't place the block 3 into block 1, as I need full width of block 3 on desktop (the 100% of the screen width, not the 100% of the block 1).
Any ideas how to change the order of 2nd and 3rd blocks with pure css on xs-devices so it is as
1
3
2
,
and not
1
2
3
as it is now?
Thank you.
Any ideas how to change the order of 2nd and 3rd blocks with pure CSS
on xs-devices so it is as
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.box {
height: 300px;
}
.box-1 {
background-color: orange
}
.box-2 {
background-color: blue;
}
.box-3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box box-1 col-sm-8 col-xs-12">
</div>
<div class="box box-2 col-sm-4 hidden-xs">
</div>
<div class="box box-3 col-xs-12">
</div>
<div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">
</div>
</body>
</html>
You might consider this solution in case there's no solution out there can help achieve your required behaviour with pure CSS
It is important to also include Container and Row.
https://getbootstrap.com/docs/4.0/layout/grid/
Does the original code look like this?
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12">
1
</div>
<div class="col-sm-4 col-xs-12">
2
</div>
</div>
<div class="row">
<div class="col-sm">
3
</div>
</div>
</div>
Assuming block 2 has a fixed height and its always at most the same height with block one, you can do the following:
CSS:
<style type="text/css">
.wrap {
position: relative;
}
.block1 {
padding-right: 33.3333%
}
#media(min-width: 768px) {
.block2 {
position: absolute;
top: 0;
right: 0;
width: 33.333%;
}
}
</style>
HTML:
<div class="wrap">
<div class="block1">
<div class="col-sm-12">Block1</div>
</div>
<div class="col-sm-12">Block 3</div>
<div class="block2">
<div class="col-sm-12">Block 2</div>
</div>
</div>
Please note that with this method, if block 2 is longer than block one, it will overflow on block 3.
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Column Reordering in Bootstrap
In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>
Looking to have a title, subtitle and then two boxes close together and next to each other in the final third div.
Struggling to get 2 buttons to align in the centre next to each other. Seems fine in certain widths, but flows onto the next line at full width
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
My CSS
.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
display: inline;
padding: 0 20px;
}
.button-box {
width:100%;
text-align:center;
}
I already knew what you mean.
Here is the correct way to fix.
HTML
<div class="button-box col-lg-12">
About Us
Our Products
</div>
CSS
.button-box {
text-align:center;
margin-top:20px;
}
DEMO
You have to use boostrap class text-center
Use below like this,
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
<div style="text-align: center;">
About Us
Our Products
</div>
This works for me, the buttons are next to each other
Simplest Way to do in Bootstrap 4 and above / Two Button Inline.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>
</html>
I'm making a header with Bootstrap. My page-header contains an image and text. I want the text to be vertically centered in the header. It seems like an easy, fix, but I'm running into trouble. I made a custom class called v-align where I set the vertical-alignment: middle;, but it's not working. Any suggestions?
Image:
HTML:
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<div class="row">
<img class="col-xs-4"src="Popcorn.png" width="100" height="auto" >
<div class="col-xs-8 v-align">
<h2>Sparky's Movie Theater</h2>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Css Class:
.v-align {
height: 100%;
display:table-cell;
vertical-align: middle;
}
I was able to get my text to be vertically aligned by adding the following to my css code:
CSS:
#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
HTML:
<div class="col-xs-8" id="box">
<h2 id="spantext">Sparky's Movie Theater</h2>
</div>
Remove the padding and margin in <H2>
h2{
margin:0;
padding:0;
}
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>