I am using Bootstrap 4 Alpha 5 and I have the following HTML:
<div class="home-content">
<div class="container">
<div class="row flex-items-xs-middle">
<div class="col-md-7">
<h1 class="site-title text-xs-center text-md-left">
<span class="name">I'm Shivam Paw</span>
<span class="title">I create beautiful and bespoke websites to fit your needs</span>
</h1>
</div>
<div class="col-md-5">
<img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
</div>
</div>
</div>
</div>
However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.
You can see the site live at https://www.shivampaw.com
I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?
If this is what you expect then look at your CSS. This is the line centering your content
.text-xs-center {
text-align: center!important;
}
This should fix it though
.site-title {
font-size: 36px;
color: white;
font-weight: bold;
text-align: left !important;
}
Turns out I had some offending CSS in my style.css:
*, img.full-size{
max-width: 100%;
}
Changing it to:
img.full-size{
max-width: 100%;
}
Fixed the problem.
Related
I have a problem with my web application.
Explanation:
The longer the text displayed on the left (so another column), the larger the image.
So how can I get one column completely independent from another?
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-4 p-4">
<h1>nosfera.app</h1>
<p>Oops, I think you got lost in the humble abode of Nosfera.
<p>But don't worry ! We will take care of you, you will be treated like a king, and soon everyone will
notice you, but for that, you have to join the dark side by clicking one of the two little buttons
below.
<div class=fields>
<div class=item>Log in</button></div>
<div class=item>Register</button></div>
</div>
</div>
<div class="col-md-6 col-xs-4 col-sm-4">
<div class="block"></div>
</div>
</div>
</div>
</section>
.section {
display: grid;
height: 90vh;
align-content: center;
}
.section p {
font-weight: 400;
font-size: 1.2rem;
}
.block {
background:url(../img/block.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
width:100%;
height:100%
}
Demo
You are applying height:100% on the .block element CSS. It will grows with the text. Just set an fixed size (100px for instance), or limit the max-height and it will stop growing
Kind of difficult to explain so I will post a live link to my site where the code is hosted: link
Basically the issue is in the about section if the window is scaled smaller the section won't compensate for the jumbotron thats overflowing like it does for the other sections that don't make use of bootstrap divs. Hopefully that makes sense?
Here's the relevant code:
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;">
<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<br>
<div class="jumbotron" style="background-color: #4c0000; padding-top: 10px; padding-bottom: 10px;">
<div class="container text-center" style="color: white;">
<h1>A Little About Me</h1>
<p style="font-size: 16px;">wordsgohere</p>
<p><h3><b>TLDR:</b></h3></p>
<p style="font-size: 16px">wordsgohere</p>
<img src="imgs/ryanyup.png" class="img-responsive" style="align-content: left">
</div>
</div>
</div>
</section>
And CSS:
.about-section {
min-height: 100%;
text-align: center;
background: #000080;
}
The entire code is also available on my git: here
Thank you.
Add <div class="clearfix"></div> right before closing the section. The reason you need this is because the div inside the section floats and thus is not a real block.
your content is just overflowing. add overflow: auto; to your section.
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;overflow: auto;">
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
What I've tried:
Here's what I started with:
<div class="row vertical-align">
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
</div>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<div class="row">
<div class="col-sm-4">
<div><img src="../img/my-image-1.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-2.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-3.png"></div>
</div>
</div>
In my CSS file, I added these classes:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
please try this and lemme know if this is what you wanted
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
</div>
</div>
</body>
I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
https://jsfiddle.net/f9ogw26n/21/
.wrapper {
height: 200px;
width: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I have a grid divided into 2. One side holds an image and the other side some text. Currently it looks as follows:
I want to make it look as follows:
I am looking to get rid of the black spot and center the text. There is no issue in centering it horizontally but unable to do it vertically to fit nicely in relation to the image. Please advice if there is any pre built class already available in bootstrap or I need to rewrite additional CSS.
The following are my current html and css.
HTML
<div class="col-md-6 custom-info">
<img src="img/test.jpg" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
CSS
.custom-info{
background-color: #c0d023;
padding: 30px;
}
After Editing:
You may try this.
HTML
<div class="row xclassrow">
<div class="col-md-6 custom-info">
<img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
<div class="content">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
</div>
<h3>View the menu.</h3>
</div>
CSS
.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
}
Hope this works. Do comeback if still any issue.!!
EDIT : Removed the xclass and wrap the content in a new class. Check DEMO
TLDR;
Use display:table with display:table-cell to accomplish vertical centering of elements.
For newer browser you can use flexbox. I will demonstrate both approaches here.
Old but secure way (may not work for you here)
What I do most of the time is define 2 helper classes called t and td
*This works if you have a defined height of the containing element
The code then looks something like this:
HTML
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<div class="t">
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.t {
display: table;
height: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
height: 100%;
}
Jsfiddle
Old and even more secure way
Since you know that your 2 columns are 6+6 and that makes 12 columns total width.
Make 1 long element col-md-12 and make a table inside it (either with regular table elements or the helper classes i used in the above example.
HTML
<div class="col-12 specific-class">
<div class="t">
<div class="td">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.specific-class .td {
width: 50%;
background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }
Jsfiddle
Note: added vertical align to the image to remove small spacing under it
The mighty flexbox (the future looks bright)
Flexbox is a sight for sore eyes for us fe-devs and will be an integral building block of the future www.
HTML
<div class="col-12 specific-class">
<div class="fl-element">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="fl-element">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
CSS
.specific-class {
display: flex;
align-items: center;
}
.specific-class .fl-element {
width: 50%;
}
Jsfiddle