3 column bootstrap

Developer
Adethrax
Size
3,115 Kb
Views
46,552
  1. 3 column bootstrap Previews
  2. 3 column bootstrap HTML Codes
  3. 3 column bootstrap CSS Codes

How do I make an 3 column bootstrap?

What is a 3 column bootstrap? How do you make a 3 column bootstrap? This script and codes were developed by Adethrax on 12 August 2022, Friday.

3 column bootstrap Previews
IQ Test

3 column bootstrap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3 column bootstrap</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en">
<head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <div class="jumbotron"> <h1>Logo Here </h1> <p>This page will grow as we add more and more components from Bootstrap...</p> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> <li><a href="#">Page 4</a></li> <li><a href="#">Page 5</a></li> </ul>	<div class="row"> <div class="col-md-6"> <div class="search"> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class="form-control input-lg" placeholder="Search" /> <span class="input-group-btn"> <button class="btn btn-info btn-lg" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </div> </div> </div>	</div> </div> </div>
</nav> <div class="row"> <div class="col-md-2">
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Menu 7</a></li> <li><a href="#">Menu 8</a></li> <li><a href="#">Menu 9</a></li> <li><a href="#">Menu 10</a></li> </ul> </div>
<div class="col-md-8"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="Chania" width="460" height="345"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="Chania" width="460" height="345"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="Flower" width="460" height="345"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div> <div class="item"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="Flower" width="460" height="345"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </br> <div class="row"> <div class="col-xs-6 col-md-6"> <a href="#" class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-md-6"> <a href="#" class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-md-6"> <a href="#" class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-md-6"> <a href="#" class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> </a> </div>
</div> </br> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Top Rated</a></li> </ul> </br> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Item Title</h3> <p>Item description is displayed here</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Item Title</h3> <p>Item description is displayed here</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Item Title</h3> <p>Item description is displayed here</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div>
</div>
</div> <div class="col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Top Rated</a></li> <li class="sidebox"> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>This is the description</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </div> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>This is the description</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </li> <div class="thumbnail"> <img src="http://static.kanui.com.br/cms/banner-surf-esportes-kanui.jpg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>This is the description</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </ul> </div> </div> <div class="jumbotron"> <p>This is the footer</p> </div>
</div>
</body>
</html>
</body>
</html>

3 column bootstrap - Script Codes CSS Codes

 .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; margin: auto; }
#custom-search-input{ padding: 3px; border: solid 1px #E4E4E4; border-radius: 6px; background-color: #fff;
}
#custom-search-input input{ border: 0; box-shadow: none;
}
#custom-search-input button{ margin: 2px 0 0 0; background: none; box-shadow: none; border: 0; color: #666666; padding: 0 8px 0 10px; border-left: solid 1px #ccc;
}
#custom-search-input button:hover{ border: 0; box-shadow: none; border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{ font-size: 23px;
}
.col-md-6 { width: 100%; float: right !important;
}
@media screen and (max-width: 300px) { .col-md-6 { width: 100%; float: right !important; }
}
3 column bootstrap - Script Codes
3 column bootstrap - Script Codes
Home Page Home
Developer Adethrax
Username adethrax
Uploaded August 12, 2022
Rating 3
Size 3,115 Kb
Views 46,552
Do you need developer help for 3 column bootstrap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adethrax (adethrax) Script Codes
Name
Hover Images
Slide Images CSS
Fancybox.js
JQuery FlexSlider responsive
A Pen by adethrax
Bootstrap Homepage
The Firm
Email template
Responsive Brand Scroller
Scroll Image Script
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!