I'm trying to create cards that maintain the position of its button when the user's browser dimensions change.
Desktop full-screen:
When the browser is resized:
I'm trying to keep the card button in the same position when the browser is resized. But in my example the "Upvote" button is moved beneath the text, instead of remaining on the right side. To be more specific, have a look at this picture:
The green space should be reserved for the button, and red space should be the position of the button:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<div class="row justify-content-center">
<div>
<div class="container">
<div class="card m-2">
<div class="card-body">
<div class="container p-1">
<img
src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg"
class="float-left mr-1"
alt=""
width="60px"
heigth="60px"
/>
<div class="row">
<div class="col-md-11 pr-5">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-1 ml-md-auto align-self-center">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="media align-items-center">
<img width="10%" class="align-self-center mr-3" src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" alt="Generic placeholder image">
<div class="media-body">
<div class="row align-items-center">
<div class="col-md-9 col-9">
<h5 class="mt-0">Kion Bar 2 - Best energy bar there is no</h5>
<p>Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-3 col-3">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
It'd be better if you use media, it'll make your work easier. Also .container should use only once within a section.
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This
padding is then counteracted on the rows with negative margins. This
way, all the content in your columns is visually aligned down the
left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
You can check the below links for reference
Grid System of Bootstrap
Media
First of all, you are making many mistakes in your markup. You should take the time to learn how to correctly write your markup.
Secondly, learn how to work with images. DO use width and height attributes for your images, but DO NOT specify them in pixels. What you are doing is setting an aspect ratio, not the actual dimensions. The .img-fluid class makes your image responsive. The attributes maintains its aspect ratio. Specifying the aspect ratio will prevent the browser from moving content down the page while it waits to download the image and figure out how to draw it on the canvas.
I believe the following is what you are trying to do.
See it on Bootply
<div class="container-fluid">
<div class="card my-2">
<div class="card-body">
<div class="row">
<div class="col-1">
<img src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" class="img-fluid" alt="" width="600" heigth="600">
</div>
<div class="col-9">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-2">
<a href="#" class="btn btn-outline-secondary btn-block">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
Remember, you can set different col spans for different viewports.
Related
I've problems with this Bootstrap 4 full-span row definition:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<div style="position: absolute; bottom: 0;"> <!-- this breaks responsiveness -->
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
</div>
It works properly WITHOUT the right column bottom alignment as in the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
How can I align the right column content bottom without breaking responsiveness? On my page the columns content overlap instead of splitting in two independent lines.
You may achieve your goal by adding align-self-end class to the second column.
Here's a live demo:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container my-5">
<div class="row mx-0">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
</div>
<div class="col-lg-6 col-md-12 align-self-end">
<h2>Together, we empower software development around the world.</h2>
<p class="lead mb-0 pt-2">Join our unique team of developers.</p>
</div>
</div>
</div>
You may play with margins and paddings the way you see fit, I have removed the paddings and margins from the second column's content.
I have also removed some unnecessary tags as the task can be achieved without any extra markup. Some tags that were removed are actually wrong (only the closing tags is present so the tag is assumed a typo and I removed it).
I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below
example image
Problems
on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I
made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)
my code
<!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>
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="container">
<div class="card bg-dark text-white">
<img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay ">
<div class="text-left w-25 ">
<h2 class="card-title "> Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).
<div class="card bg-dark text-white">
<img class="card-img img-responsive"
src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay d-flex align-items-center">
<div class="row">
<div class="text-left col-lg-3 col-sm-6">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
Use d-flex align-items-center on the card-img-overlay to vertically center the row.
https://www.codeply.com/go/eRpRZj9Z8M
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
I have two bootstrap columns with col-xs-8 and col-xs-4. Both contain image of same height. When I try to reduce the width of browser the second image is becoming shorter compare to first. I want both in same height. Code is shown below. Thanks in advance.
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-responsive">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-responsive">
</div>
</div>
The size will reduce, as the screen size reduces, for preventing that you have to write media-query and make your web page responsive.For example in how to write media query, go through given link.
How to write media query for maiking reponsive websites
This will make height fixed.
.img-fix{
max-width:100%;
height:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
I solve the problem by adding the following css
.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.offer-row .col-sm-4{padding-left:7px;overflow-y: hidden;}
.offer-row .col-sm-4 img{min-height:100%; }
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row row-eq-height">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
The header is all effed: How do I get this smartcat.png image to be the entire background for the header only?
I am hoping to add the answer to my stylesheet "cat.css" .
I appreciate all suggestions and better practices for coding with bootstrap.
Here is the website:
http://chillcastle.com/cat/felinedelirium
Here is my stylesheet:
.header-content {background: url("img/smartcat.png");}
.header {background: url("img/smartcat.png");}
Here is the webpage code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Feline Delirium</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="www.chillcreatives.com">
<span class="sr-only">Poop</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Felines</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">Cat Tales</a>
</li>
<li>
<a class="page-scroll" href="#services">Cat News</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Cat Life</a>
</li>
<li>
<a class="page-scroll" href="#contact">Cat Stuff</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Kitty Cats</h1>
<hr>
<p>Feline Delirium is a fun thing.</p>
Find Out More
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Cats</h2>
<hr class="light">
<p class="text-faded">Whoa. Cats.</p>
Get Started!
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">BIJOUXXX</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Sturdy Templates</h3>
<p class="text-muted">Cats!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Ready to Ship</h3>
<p class="text-muted">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Up to Date</h3>
<p class="text-muted">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Made with Love</h3>
<p class="text-muted">You have to make your websites with love these days!</p>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="img/cubecat.png" class="portfolio-box">
<img src="img/cubecat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/smartcat.png" class="portfolio-box">
<img src="img/smartcat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/goldencat.png" class="portfolio-box">
<img src="img/goldencat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="smokincat.jpg" class="portfolio-box">
<img src="img/smokingcat.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/5.jpg" class="portfolio-box">
<img src="img/" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/6.jpg" class="portfolio-box">
<img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<h2>Bijouxxx</h2>
cats!
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Hit us up with your cat pic</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>123-456-6789</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p><a href="the chill castle # gmail.com >feedback#startbootstrap.com</a></p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
The aspect ratio of the cat picture compared to the header is way different. You could crop the image in height a little bit to help it fit.
After which you can use this code to get it scale to cover the entire header. You will need to mess around with the css position and the size of the cat image to see what works for you.
.header-content {
background: url(img/smartcat.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the article link for a full width background image - https://css-tricks.com/perfect-full-page-background-image/
Happy coding!
Added Note
The header is very thin and currently has an approximate aspect ratio of 7:1. Which basically means in order to maintain aspect ratio ,every one increase in height will cause a 7 times increase in width. So if you double the height, the width will be 14 (i.e 14:2)
Now your image on the other hand has an aspect ratio of 25:24.
So imagine that you're trying to fit a square box inside a thin horizontal line. Not really going to fit without distorting the image.
So you basically have three options.
Change background-size:cover to background-size:contain. This will basically make the height of the image the same as the parent so that the whole image appears without breaking the ratio. Basically it will make sure your whole image is displayed in the container. But this also means that your container will not get fully covered by the image. Here is an example of option 1 . http://i.imgur.com/GxcF4aO.jpg?1
Keep background-size:cover and adjust the aspect ratio of the image to be more like the header. i.e. Crop the image in height.
Here is an example of a cropped image. http://i.imgur.com/GNEZq4U.jpg?1
Keep everything the way it is and increase the height of the header to match the image.
Here's a link to show how aspect ratio works. You can toggle the How to handle ratio mismatches radio buttons at the bottom to check the difference between options 1 and 2.
http://andrew.hedges.name/experiments/aspect_ratio/ Make sure you have the show sample image button checked. Enter the dimensions of the header and either the height or the width of the image to find out what ratio the image should be.
Hope this helps.