Align columns in Bootstrap. The first tile needs to be large - c#

I want to create a group of tiles using Bootstrap 3. On the page load, I get a list of names from server and I do a foreach on the names to create a grid. For now I have achieved the tiles all to be equal size. And it looks like this.
But what I really need is
The first tile needs to be col-6, the remaining col-6 need to be occupied by four of them, and then all the remaining will be col-3.
How could I do this dynamically when the data is been looped through?
This is my existing code, where the tiles are of equal size.
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
foreach (var blog in blogmaster.Children)
{
<div class="col-md-3">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.Name</h4>
</div>
</div>
}
}


NB: My Umbraco code may contain errors. But I hope I convey the idea that you can use.
1) You can improve your layout
Calculate the height of the large block considering the gap between two rows of small blocks.
You do not need nested blocks, because you have calculated the height of the large block and all the blocks are floated left.
Please check the layout:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.blog > div {
padding: 0;
padding-top: 5px;
}
#media (min-width: 992px) {
.blog > div {
padding-right: 5px;
}
}
.blog > .col-md-3 > div {
background: lightblue;
height: 250px;
}
.blog > .col-md-6 > div {
background: orange;
height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
font-weight: 300;
margin-top: 0;
padding-left: 10px;
padding-top: 32px;
}
<div class="container-fluid">
<div class="row blog">
<div class='col-md-6'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
</div>
</div>
2) If only the first block has to be large
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var isFirst = true;
foreach (var blog in blogmaster.Children)
{
<div class="col-md-#(isFirst ? 6 : 3)">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
isFirst = false;
}
}
3) If you need to repeat a large block
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var i = 0;
foreach (var blog in blogmaster.Children)
{
<div class="col-md-#(i % 9 == 0 ? 6 : 3)">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
i++;
}
}
4) If you need a large block on the right side too
Apply the float: right property to the second large block when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose. It's an analogue of the .pull-right class.
Please check new layout:
jsfiddle • codepen
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.blog > div {
padding: 0;
padding-top: 5px;
}
#media (min-width: 992px) {
.blog > div {
padding-right: 5px;
}
.pull-md-right {
float: right !important;
}
}
.blog > .col-md-3 > div {
background: lightblue;
height: 250px;
}
.blog > .col-md-6 > div {
background: orange;
height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
font-weight: 300;
margin-top: 0;
padding-left: 10px;
padding-top: 32px;
}
<div class="container-fluid">
<div class="row blog">
<div class='col-md-6'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-6 pull-md-right'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
</div>
</div>
And the code can be like this.
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var i = 0;
foreach (var blog in blogmaster.Children)
{
if (i % 18 == 0)
{
<div class="col-md-6">
}
else if (i % 18 == 11)
{
<div class="col-md-6 pull-right">
}
else
{
<div class="col-md-3">
}
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
i++;
}
}


I feel more comfortable with PHP and the questioner does not care, then how I solve this in PHP, generally, of course:
//Array declaration *ignore*
$array = [1,2,3,4,5,6,7,8,9];
//Index Creation
$i=0;
//String to store results
$myResult = "";
foreach($array as $divs){
if($i == 0 || $i>0 && $i<=4){
$myResult .="<div class='col-md-6'>your content here</div>";
}else{
$myResult .="<div class='col-md-3'>your content here</div>";
}
if($i==0){
$myResult .="<div class='col-md-6'>";
}elseif($i == 4){
$myResult .= "</div>";
}
$i++;
}
Result:
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>


You can easily do this by,
#foreach (var blog in blogmaster.Children)
{
if (blog.name == "Product Path")
{
<div class="col-md-6">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 500px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.name</h4>
</div>
</div>
}
else
{
<div class="col-md-3">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.name</h4>
</div>
</div>
}
}
Just get first item and assign its class as col-md-6 and others with col-md-3. Because I'm not having your dataset, I use my own simple dataset with same color. out put is like this,

Related

Bootstrap progress bar with label OVER bar/background to the right

How can I achieve the following progress bar with a label over to the right with a Bootstrap v5.2 Progress Bar?
I have tried using negative margins and got close, but I'm having problems when the label gets wider due to the text getting longer:
Here is my code to get the above:
Single row (ProgressBarWithName.cshtml):
#{
var valuePercentage = (double)Model.Value / Model.MaxValue * 100;
}
<div class="row m-2" style="height: 50px;">
<div class="col-3 text-white bg-dark h-100 d-flex justify-content-end">
<div class="font-allan align-self-center"><b>#Model.Name</b></div>
</div>
<div class="col-9 h-100">
<div class="row gx-0 progress-container h-100">
<div class="col-11">
<div class="progress h-100">
<div class="progress-bar"
role="progressbar" aria-label="Example with label"
aria-valuenow="#valuePercentage" aria-valuemin="0" aria-valuemax="#Model.MaxValue"
style="width: #valuePercentage%;">
</div>
</div>
</div>
<div class="col-1 progress-label align-self-center">
<b class="#if (valuePercentage > 85){ <text>text-white</text> }">#Model.Value</b>
</div>
</div>
</div>
</div>
All rows (CustomBarChart.cshtml):
<div>
#foreach (var item in Model.Items)
{
await Html.RenderPartialAsync("ProgressBarWithName", item);
}
</div>
And I'm just hard-coding some models for testing purposes:
#{
var stat = new Stat("Some Stat", 40, 100);
var stat1 = new Stat("Some Stat1", 84, 100);
var stat2 = new Stat("Some Stat2", 86, 100);
var stat3 = new Stat("Some Stat3", 10, 100);
var stat4 = new Stat("Some Stat4", 100, 100);
var stats = new Stats(new List<Stat> { stat, stat1, stat2, stat3, stat4 });
await Html.RenderPartialAsync("CustomBarChart", stats);
}
CSS:
.progress-container{
margin-right: -60px;
}
.progress-label{
margin-left: -35px;
width: 0;
}
Essentially, my problem is that the default style of the bootstrap progress bar puts the label in the filled portion of the bar.
What I'm trying to do is put the label on the right side of the entire bar (whether it be the filled portion or the background).
I have tried with float, but since I'm using a row/col setup to get that sort of grid style I'm emulating.

Got it:
<div class="row m-2" style="height: 50px;">
<div class="col-4 text-white bg-gray h-100 d-flex justify-content-end rounded-2 p-2" title="#Model.Name">
<b class="font-sans align-self-center mh-100 w-100 overflow-hidden"
style="text-overflow: ellipsis; white-space: nowrap;">
#Model.Name
</b>
</div>
<div class="col-8 h-100 progress-label-container">
<div class="progress h-100">
<div class="progress-bar"
role="progressbar" aria-label="Example with label"
aria-valuenow="#valuePercentage" aria-valuemin="0" aria-valuemax="#Model.MaxValue"
style="width: #valuePercentage%;">
</div>
</div>
<div class="progress-label">
<b>#Model.Value #Model.Units</b>
</div>
</div>
</div>
.progress-label-container{
position: relative;
}
.progress-label{
position: absolute;
right: 7.5%;
top: 25%;
}

How can I always get the same column size? (Bootstrap)

I'm building a website but I have an issue that I can't fix. I have multiple card with information inside that are in columns and each 4 columns, they switch to another row. The problem is that the number of card can change and it's not always divisible by 4. So at the end, I can have less than 4 columns in a row. And when I have les than 4 columns in a row, the displaying is not the same that when I have 4 columns in a row. I know that it's doing that because I use col-sm bootstrap class. It's the only way that I found that is simply responsive. I also tried to use col-sm-3 but the problem is that the website is no more responsive. (See screenshots) By the ways, I use razor views so I can write C# and HTML.
What the displaying do when I use col-sm: Display col-sm
The displaying that I want: Display col-sm-3
The problem of the col-sm-3: Problem of col-sm-3
This is the code of the displaying of my card:
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 10em;
margin: auto;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
<div class="container-fluid">
<div class="headline">VOITURES COMPACTS</div>
<div class="row">
#foreach (var car in Model.cars)
{
if (counter != 0 && counter % 4 == 0)
{
#:</div>
#:<div class="row">
}
<div class="col-sm-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="#car.ImgPath" alt="Card image cap">
<div class="card-body vehicule-cardbody">
<h2 class="vehicule-name">#car.Name</h2>
</div>
</div>
</div>
counter++;
}
</div>
</div>
Don't try running the code, it will not work because it's a razor view.
Thanks

You should be able to get the layout you want using Bootstrap’s grid system.
Your image for the layout you want is larger than what Bootstrap-4 provides with the container-xl (Bootstap-5 has a container-xxl), but you can create your own xxl container (my example has the max width at 1440px, but you can change that).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: #212121;
color: #fff;
}
h1 {
color: #B8BABD;
}
hr {
width: 10%;
border-top: 5px solid #392A49;
}
.container-xxl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width:1500px) {
.container-xxl {
max-width: 1440px;
}
}
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 100%;
text-align: center;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
</style>
<div class="container-xxl">
<h1 class="text-center mt-5">VOITURES COMPACTS</h1>
<hr>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8F8F/000000.png?text=Blista" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Blista</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FFEE8F/000000.png?text=Dilettante" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Dilettante</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/B0FF8F/000000.png?text=Issi" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Issi</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/8FD2FF/000000.png?text=Panto" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Panto</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/AB8FFF/000000.png?text=Prairie" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Prairie</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8FF4/000000.png?text=Rhapsody" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Rhapsody</h2>
</div>
</div>
</div>
</div>
</div>
My example code is in plain HTML, but you should be able to reverse it to work with Razor.

How can i make the size of the div standard whilst changing the elements inside it to accommodate the div?

I want to make the div a standard size of 330px. But when I do it, the elements in the div will get screwed up.
<div class="col-md-3 m-wthree" style="height:330px;">
<div class="col-m">
<a href="#" data-toggle="modal" data-target="##item.id" class="offer-img">
<img src="#item.productImage" class="img-responsive" alt="" style="width:auto;height:124px;">
<div class="offer"><p><span>Offer</span></p></div>
</a>
<div class="mid-1">
<div class="women">
<h6>#item.productName</h6>
</div>
<div class="mid-2">
<p><label>$#item.productOriginalPrice</label><em class="item_price">$#item.productCurrentPrice</em></p>
<div class="clearfix"></div>
</div>
<div class="add">
<button class="btn btn-danger my-cart-btn my-cart-b " data-id="#item.id" data-name="#item.productName" data-summary="#item.productName" data-price="#item.productCurrentPrice" data-quantity="1" data-image="#item.productImage">Add to Cart</button>
</div>
</div>
</div>
</div>
Problem
With % as height
.m-wthree {
width: 50%;
float: left;
margin-bottom: 2em;
}
.add{
text-align:center;
}
.mid-2 p{
float:left;
font-size:0.9em;
color:#B4B4B4;
}
.mid-2 p em{
font-style:normal;
}
.mid-2 p label{
text-decoration: line-through;
font-weight:400;
margin-right:6px;
}
.mid-2 {
padding: 1em 0;
}
Above is the CSS code for the custom CSS. The CSS all seem ok and does not look like it is affecting anything....

How can i apply bootstrap in my website? ASP.NET, C#

I have design a website which working fine regarding to design in desktop pc/laptop screen,but it's not working well in mobile and tablets devices.I'm using "responsive web design tester" google chorme add one to check this.It's middle contents changes.
How can i apply bootstrap in my website??I just include links of bootstrap or change the whole design.I'm beginner,I don't know how to apply "bootstrap".I have installed "Bootstrap" by using “Manage NuGet Package". Here is my solution explore snapshot
Here is my desktop view some content
Here mobile view
Here is my aspx code ,specific part of code in which the content not working well :
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-area">
<h2 class="title">About us</h2>
<span class="line"></span>
<p>
UpSkill blends scientifically approved principles of learning and the best quality content to boost personal learning!
We aim to be the hub of quality education for personal growth and individual learning for a successful career!
</p>
</div>
</div>
</div>
</div>
</section>
<!-- end about -->
<!--Courses Start Here-->
<section id="our-team">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-area">
<h2 class="title">Our Courses</h2>
<span class="line"></span>
<p>Search Courses as you want to study and Learn from our best Team!</p>
</div>
</div>
<div class="col-md-12">
<div class="our-team-content">
<div class="container">
<div class="row">
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\linux.png" alt="linux img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to Linux </p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!-- <div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div> -->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\asp-net.png" alt="asp.net img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to Asp.net</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!--<div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div>-->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\php.png" alt="php img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to PHP</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!--<div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div> -->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\html.png" alt="html img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to HTML5</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
</div>
<!-- Start single Course member -->
</div>
</div>
</div>
</div>
</div>
<br />
<button style="position:relative; left:1170px; color:black; font-size:18px; width:130px; height:60px;">See More</button>
</div>
</div>
</section>
"About" and "Our Courses" also working well in mobile devices,but problem with blow code.
Here is my bootstrap.css code :
.container {
padding-right: .9375rem;
padding-left: .9375rem;
margin-right: auto;
margin-left: auto;
}
.container::after {
display: table;
clear: both;
content: "";
}
#media (min-width: 544px) {
.container {
max-width: 576px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
padding-right: .9375rem;
padding-left: .9375rem;
margin-right: auto;
margin-left: auto;
}
.container-fluid::after {
display: table;
clear: both;
content: "";
}
.row {
margin-right: -.9375rem;
margin-left: -.9375rem;
}
.row::after {
display: table;
clear: both;
content: "";
}
.col-xs-1, .col-xs-2, .col-xs-3,
.col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3,
.col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9,
.col-md-10, .col-md-11,
.col-md-12, .col-lg-1, .col-lg-2,
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9,
.col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3,
.col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7,.col-xl-8, .col-xl-9,
.col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: .9375rem;
padding-left: .9375rem;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
.col-xs-5, .col-xs-6, .col-xs-7,
.col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-1 {
width: 8.333333%;
}
.col-xs-2 {
width: 16.666667%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.333333%;
}
.col-xs-5 {
width: 41.666667%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.333333%;
}
.col-xs-8 {
width: 66.666667%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-10 {
width: 83.333333%;
}
.col-xs-11 {
width: 91.666667%;
}
.col-xs-12 {
width: 100%;
}
How can i apply "Bootstrap" on my website?Which works well in every device.
Thanks..

There's a bit more to bootstrap than just dropping the files in (So you should spend a bit of time learning the basics), but have a look at this section to get your basic html:
http://getbootstrap.com/getting-started/#template
This will link the bootstrap javascript and css. Be sure to add any of your own javascript/css as well.
Then have a look at the overview and grid system at: http://getbootstrap.com/css/
This is how you choose the structure of your site using html as JustLearning mentioned. You'll probably be just putting your images in 1 row spanned across 4 columns.

The page looks bootstrapped to me but it depends on whether you meant you want your images to turn into links or made smaller into icons as that will be a new question. Responsive design is about the page fitting into the device and your page appears to fit although the images have been resized. Plus I don't see any MVC or C# or ASP.net so this is straight forward as it looks like you just have a basic HTML5 site. Here is a good link to get you started: http://docs.asp.net/en/latest/client-side/bootstrap.html

Converting from HTML to .NET MVC with Bootstrap

I am converting an web app from HTML with bootstrap to ASP.Net (C#) MVC with Bootstrap. I've moved the index file into the View, I've added to theme (dashboard.css) to the Content directory, I've added my images to the images directory, and I've updated the bundle config file.
When I run the HTML page in Firefox, I get the correct layout with 12 items in a row. When I run it with ASP.Net MVC, I only get 4 items in the row. Everything is very big compared to straight HTML. I am trying to get the 12 items in the row like HTML. This is my first ASP.Net MVC app. Any advice on where I should look next? Here is my View file:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-justified">
<li><a class="navbar-brand" href="#"><img src="images/Logo-Smaller.png" alt="Jenkins"></a></li>
</ul>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 col-lg-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Products <span class="sr-only">(current)</span></li>
<li>Jenkins Replacement Fans</li>
<li>Manufacturer Fans</li>
<li>Motor Protection</li>
<li>Electric Motor Parts</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main col-lg-10">
<span class="anchor" id="JFans"></span>
<h3 class="page-header">Jenkins Replacement Fans</h3>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 col-md-1 col-lrg-1 placeholder">
<img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>shrouded</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Shallow Recess</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Paddle Wheel</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>shrouded</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Shallow Recess</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Paddle Wheel</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
</div>
</
Here is my CSS file:
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 65px;
}
.navbar-brand {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 0 0 0;
}
.navbar-brand >img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: auto;
padding-top: 0px;
float: none;
}
.navbar-nav li a {
line-height: 65px;
height: 65px;
padding-top: 0;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
background-color: #F0F0F0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 55px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.table td {
text-align:left !important;
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
.anchor{
display: block;
height: 85px; /*same height as header*/
margin-top: -85px; /*same height as header*/
visibility: hidden;
}

There is no difference in HTML with bootstrap and MVC with Bootstrap so far you are using the same version of Bootstrap. I have converted many commercial HTML Bootstrap themes into MVC Bootstrap themes and it is pretty straight forward.
First of all you are missing a closing body tag. It could be an issue.
Secondly, do not use MVC Bundles at the moment. Copy all your existing HTML in views and make sure all scripts and CSS is referenced to right path. Write a simple action method that just return the view. Once you get the desired output, you are good to modify HTML with dynamic elements.
Thirdly, make sure there is no padding or margin applied to the div where you are using the following code.
col-sm-9 col-sm-offset-3
In last, use developer tools available in your browser to find out the exact output of HTML page. You can always edit the HTML and get the real time results in many modern browsers.

Categories