I have two simple dropdown menus with Bootstrap v3. I want it so that they are displayed side by side with a width and utilizing the grid.
But it seems that the width stays the same. HEre is what I mean:
.menuList > div.dropdownInline {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Do you see how without inline... the dropdown stretches fine into a nice width but ... with it.. (top menus)... it becomes squished? And one doesn't even show the blue panel.
What am I doing wrong?
you can just set width of menu
.dropdown-menu{
width:400px;//or whatever you want
}
check this out
Plunker
.dropdowm-menu is as small as it's content
so you can just fix it like above or set width of it's children element.
.menuList > div.dropdownInline {
display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Just add it
Related
I have a BootStrap 5 row, the columns of which will always remain the same, even if the content inside of them overflows the column. How do I make it so that when content is larger than the column, the column expands in size?
As you can see, the columns (purple) let the cards inside of them overflow, therefore causing them to collide with other cards. What I want is for the columns to expand when the content inside of them is bound to overflow.
HTML for rows and columns:
<div class="row">
<div class="col">
<h1 class="header">User</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Username: </a>
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Discord: </a>
<a class="header row pt-2">Date of registration: </a>
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn shadow text-white me-1" style="background-color: #7289da">Link Discord</a>
<a class="btn btn-secondary shadow text-white me-1">Change password</a>
<a class="btn btn-danger shadow text-white" data-bs-toggle="modal" data-bs-target="#logout">Log out</a>
<div class="modal fade" id="logout" data-bs-backdrop="logout" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style=" width: 25rem">
<div class="modal-content text-white">
<div class="modal-body" style="background-color: #0e0e0e">
<div class="container">
<div class="row justify-content-center">
<div class="col-1" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-triangle-exclamation" style="font-size: 50px;"></i>
</div>
<div class="col-8 mt-4">
Are you sure you wish to log out?
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 justify-content-center" style="background-color: #0e0e0e">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button data-bs-dismiss="modal" type="button" class="btn btn-danger" #click="deleteCookie()">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">Plan</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-tag" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Date of Purchase: </a>
<a class="header row pt-2">Date of Expiration: </a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-primary shadow text-white me-1" #click="">Upgrade</a>
<a class="btn btn-danger shadow text-white">Cancel</a>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">API</h1>
<div class="card card-large border-0 me-3">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-code" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-secondary shadow text-white me-1 disabled">API docs</a>
<a class="btn btn-secondary shadow text-white me-1" onclick="">Copy API key</a>
<a class="btn btn-secondary shadow text-white">Regenerate API key</a>
</div>
</div>
</div>
</div>
</div>
Add col-lg-4 in column row like this
<div class="row">
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
</div>
For more information, please visit this link : https://getbootstrap.com/docs/5.2/layout/columns/#how-they-work
I have a bootstrap dropdown as part of input group. How do I align width of the dropdown-menu to parent's input-group?
<div id="ddl_1" class="input-group">
<input type="text" class="form-control ">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
aria-haspopup="true" aria-expanded="true"
data-toggle="dropdown"
data-boundary="viewport"
data-reference="parent"
data-target="#ddl_1">
</button>
<div class="dropdown-menu">
<div class="dropdown-item">Name 0</div>
<div class="dropdown-item">Name 1</div>
<div class="dropdown-item">Name 2</div>
<div class="dropdown-item">Name 3</div>
<div class="dropdown-item">Name 4</div>
</div>
</div>
</div><!-- end input group -->
Note, that I'm using data-boundary="viewport" because I use it inside scrollable container and it might overflow.
https://codepen.io/Lieroo/pen/JjKadpa
You can change the "position-static" of the "input-group" div to "position-relative". Then you add "w-100" to the "dropdown-menu" div.
<div id="ddl_1" class="input-group position-relative show">
<input type="text" class="form-control ">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
aria-haspopup="true" aria-expanded="true"
data-toggle="dropdown"
data-boundary="viewport"
data-reference="parent"
data-target="#ddl_1">
</button>
<div class="dropdown-menu w-100">
<div class="dropdown-item">Name 0</div>
<div class="dropdown-item">Name 1</div>
<div class="dropdown-item">Name 2</div>
<div class="dropdown-item">Name 3</div>
<div class="dropdown-item">Name 4</div>
</div>
</div>
</div><!-- end input group -->
https://codepen.io/callmesupercookie/pen/MWeqaeX
I need to align content in one of the columns in html like on the picture. But for some reason, even with the right code, it's not working for me. Instead of the content being close to the image, it's away from it. Can anyone tell me where is my error or what I'm doing wrong? Attached below are the code and image of what it should look like. Would appreciate any help! Here is the link to the github and picture:
/* body { padding-top: 70px; } */
html, body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {
}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift">Add to Wish List</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
With couple of changes to the row - col divs below is the code snippet that might be the solution to you problem. (Though the images are missing, it comes close to screenshot you have posted).
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-5">
<img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in
Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift">Add to Wish List</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope this helps. Don't forget to mark as answer if it helps. (Run the code snippet in full screen mode)
Thank you. :)
Just separate your bootstrap column become col-md-4,col-md-6,col-md-2 to get visible same line. And also always use the text after the icon <span class="glyphicon glyphicon-gift"></span> Add to Wish List . I hope this solution will be helpful.
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
Login or Create new account
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user">My Account</span></li>
<li><span class="glyphicon glyphicon-gift">Wish List</span></li>
<li><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></li>
<li><span class="glyphicon glyphicon-arrow-right">Checkout</span></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>Art Store</h1>
</div>
<div class="col-sm-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Work</li>
<li>Artists</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By Elisabeth Louise Vigée Le Brun</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
</div>
<div class="col-md-6">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-gift"></span> Add to Wish List
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Add to Shopping Cart
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td>National Gallery, London</td>
</tr>
<tr>
<th>Genres:</th>
<td>Realism, Rococo</td>
</tr>
<tr>
<th>Subjects:</th>
<td>People, Arts</td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText">Artist Holding a Thistle</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText">Self-portrait in a Straw Hat</p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>Edit</button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span>Checkout</button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Caravaggio</li>
<li>Cezanne</li>
<li>Matisse</li>
<li>Michelangelo</li>
<li>Picasso</li>
<li>Raphael</li>
<li>Van Gogh</li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li>Baroque</li>
<li>Cubism</li>
<li>Impressionism</li>
<li>Renaissance</li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Artist Holding a Thistle</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Portrait of Eleanor of Toledo</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Madame de Pompadour</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle">Girl with a Pearl Earring</p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li>Delivery Inforomation</li>
<li>Privacy Policy</li>
<li>Shipping</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Arrangement in Grey and Black</p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Artist Holding a Thistle</p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle">Self-portrait in a Straw Hat</p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to create HTML/CSS with the image below [![enter image description here][1]][1]
I am having trouble creating the silver "Add corkscrew" box with a white box below it and then finally another silver box within it. Any ideas how I can do that?
This is my code below but it looks nothing like the above image:
{% extends 'bootstrap/base.html' %}
{% block content %}
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
</body>
</html>
This may help get you going.
Highly suggest moving the inline styles to their own classes regardless of sample.
Thought not my preferred way, this is the bootstrap mostly way.
I did change container to container-fluid on all of them, seems to also fix another issue I noticed with responsive
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:silver">
<div>
<h6>Add CorkBoard</h6>
</div>
<div class="container-fluid" style="background-color:white">
<div class="row row-content">
<div class="col-xs-12">
<br />
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
</body>
</html>
However with a little bit of custom CSS you can achieve something slightly nicer, and improve on it and/or change it per your liking much easier.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css" media="all">
.box {
background-color: silver;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.boxinabox {
background-color: white;
width: 100%;
padding: 2.5%;
}
</style>
</head>
<body>
<div class="container-fluid box">
<h6>Add CorkBoard</h6>
<div class="boxinabox">
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm unsure if this is what you were asking about, sorry if I've gone off-topic. Please let me know if I did.
Rows can only contain columns, but you have the following:
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
You need to add a column in the row, something what like you did below that:
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
You also need to wrap your dropdown class in rows and cols too.
I have a group of buttons group:
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a>
<div id="Setup1" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a>
<div id="Setup2" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in output this is:
but I cant figure out, how to make collapse one group, when you expand other. Could someone help with that?
I was trying to play with panels, but it's unsuitable, because i need a style, which showed on attached image. And in panels only text is clickable.
Thanks
You can do it by setting up your elements with bootstrap properly.
But you can also extend the collapse by:
$('.btn').on('click',function(){
$('.panel-collapse').each(function(){
$(this).removeClass('in');
}):
});