New to bootstrap - have problem with carousel image going over text in nested columns below it. Structure is as follows - not sure why its overlapping nested columns
Would be very grateful for any advice / help
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
<h1 id="logo">test</h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-9 col-xs-9 brownbg">
<div class="row">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand"></span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/photos/1.jpg" width="771" height="292">
</div>
<div class="item">
<img class="second-slide" src="images/photos/2.jpg" alt="Homeopathy 2">
</div>
</div>
</div><!-- /.carousel -->
</div>
<h2 id="logo2">text</h2>
<div id="menu-line"><!-- -->
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 brownbg" id="C1">
text here
<img src="images/img1.png" width="163" height="55" alt=" " style="margin: 20px 0 0 0;" />
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
<div class="col-lg-3 col-md-3 col-sm-9 col-xs-9 brownbg" id="C2">
<div style="border-bottom: 2px dashed #000;margin-top:30px;padding:20px 10px;">
<p class="cyan large">Text</p>
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 footerbg" id="C3">
text
</div>
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
</div>
</div>
</div>
Related
I am trying to fit in the admin page this dashboard component. The content does not align correctly with the container (from the sidebar to the other end horizontally and from the navbar to the footer vertically). The issue I'm having is that I cannot fit it just right. The admin panel is made out of 3 components: admin page/sidebar/dashboard component.
The Dashboard content and how it aligns so far:
How can I align it correctly using Bootstrap 5?
Admin Page:
<template>
<div>
<sidebar></sidebar>
<div class="container">
<div class="row gutters-sm">
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-body tab-content">
<div class="tab-pane active">
<keep-alive>
<component :is="retrieveComponentMethod"></component>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Dashboard Component:
<template>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's sales amount</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ todaysell }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's income</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ income }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's due</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">$ {{ due }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's Expenses</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ expense }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Out of Stock Product</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</template>
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-4 mb-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
</div>
</div>
</div>
</div>
You could try the following (a part of the solution was retrieved from this answer):
.card {
height: 100%;
}
.card-body {
flex: 0 1 auto !important;
}
.card-footer.text-center {
flex: 1;
}
I have created a small fiddle showing the result:
I have a container with a row and inside that six portfolios items.
This code when used on a small screen I get the following result:
1st line : 2 images
2nd line : 1 image on the right side
3rd line : 2 images
4th line : 1 image on the left side
Anyone got a clue? Seems like a bug to me.
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img2.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img3.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img4.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.
You can use the background-image property instead of just using <img> on the <div>.
Solution:
.portfolio-thumb {
width: 300px;
height: 200px;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
Hope this helps!
I am new to using Twitter Bootstrap and I can't wrap my head around their idea of grid organization. Basically I want to arrange this page with the right set of information colspaning the left. I tried nesting the information with rows, and just kept nesting until I got lost. In the example with JSfiddle below, the table looks fine when the window is wide enough but when you shorten the width of the window the pieces stack out of order. Right 1-6 should stack together (if they must stack at all). Thanks in advance.
http://jsfiddle.net/wBg8Y/
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Actually, I was over thinking it. Solved. Wrapping the left section in helped segregate it from the right.
change to:
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Seems to be working:
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->