I want to make 3 columns horizontal and ı use col-md-12 for main column and for child columns col-md-4 but my row have only one columns and sub divs are vertical.My english not good enough but please help me.All divs are under other div and all divs are left side of page.I try my html in other project this is worked but in this projecy one thing corrupted my grid system but ı cant find it.
This is my nested Layout
#model HomeViewModel
#*#{
ViewData["Title"] = "News";
}*#
#section PageTitle{
etwyrjs
}
#section PageDesc{
etwyrjs
}
#*<div class="col-md-12">
<h2>News</h2>
</div>*#
#foreach (var pie in Model.Pies)
{
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="#pie.ImageThumbnailUrl" alt="" />
<div class="caption">
<h3 class="pull-right">#pie.Price.ToString("c")</h3>
<h3>
<a asp-controller="Home" asp-action="Details"
asp-route-id="#pie.Id">#pie.Name</a>
</h3>
<p>#pie.ShortDescription</p>
</div>
</div>
</div>
}
This is my nested Layout.
#{
ViewData["Title"] = "LayoutForOthers";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-md-12">
<img src="~/images/büyük foto-1.png" alt="Snow" style="width:100%;">
#*<div class="bottom-left">
</div>*#
<div class="top-left">
<h1 style="text-align:left; color:white">#RenderSection("PageTitle")</h1>
<br />
<br />
<p style="text-align:left; color:white;">#RenderSection("PageDesc") Dijital sağlık alanında dünyanın önde gelen isimlerinden olan ve İngiltere'nin en büyük sağlık teknolojisi topluluğu Health 2.0 London'ı kuran Maneesh Juneja, yapay zekanın geleceği hakkında önemli açıklamalarda bulundu. Kendisini ''dijital sağlık fütüristi'' olarak nitelendiren Juneja, geçtiğimiz hafta İstanbul'da katıldığı etkinlikte yapay zeka ile ilgili soruları yanıtlarken 2040 yılının önemli bir dönüm noktası olabileceğini işaret etti.</p>
</div>
#*<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>*#
</div>
</div>
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
This is from my main layout.
<div class="col-md-12">
#RenderBody()
</div>
Are you looking for something like this? This should work regardless of what your Bootstrap version is. (Open it in fullscreen)
<!-- Include this in your <head> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 bg-primary">
<!-- This is you full width column -->
<p>This is you full width column</p>
</div>
<div class="row">
<div class="col-sm-4 bg-danger">
<!-- This is 1/3 columns -->
<p>Column 1</p>
</div>
<div class="col-sm-4 bg-info">
<!-- This is 2/3 columns -->
<p>Column 2</p>
</div>
<div class="col-sm-4 bg-success">
<!-- This is 3/3 columns -->
<p>Column 3</p>
</div>
</div>
</div>
Related
I want to achieve something like this:
Here's what, I am currently getting in Bootstrap:
I want to achieve the following:
Width ratios must be such that Sites : User : Download = 2:8:2
Sites-Banner, Sites-Search, Download-Banner, Download-Summary all should have same heights
User-Login must have combined height of Sites-Banner & Sites-Search (or Download-Banner & Download-Summary)
Heights of Sites-List, User-Operations, Download-Details must be independent and can extend as long as required.
Here's my code: Fiddle (Check Update 1)
<div>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col bg-primary">
<p id="sites-banner">Sites Banner</p>
</div>
</div>
<div class="row">
<div class="col bg-secondary">
<p id="sites-search">Sites Search</p>
</div>
</div>
<div class="row">
<div class="col bg-success">
<p id="sites-list">Sites List</p>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col bg-danger">
<p id="user-login">User Login</p>
</div>
</div>
<div class="row">
<div class="col bg-warning">
<p id="user-operations">User Operations</p>
</div>
</div>
</div>
<div class="col-2">
<div class="row">
<div class="col bg-info">
<p id="downloader-banner">Download Banner</p>
</div>
</div>
<div class="row">
<div class="col bg-light">
<p id="download-summary">Download Summary</p>
</div>
</div>
<div class="row">
<div class="col bg-dark">
<p id="download-details">Download Details</p>
</div>
</div>
</div>
</div>
</div>
I am not able to align the height of User-Login with Sites-Banner & Sites-Search [Done : Update 1]
Sites-List, User-Operations & Download-Details do not extend independently
Update 1: New Code
I got the User-Login to have combined height of Sites-Banner & Sites-Search, by wrapping them in a single row (<div class="row">)
But I am still not able to get the heights of Sites-List, User-Operations, Download-Details to be independent.
Update 2: New Code
Got the heights of Sites-List, User-Operations, Download-Details to be look independent.
But the there's lot of padding in between columns, which introduces white space in between and makes them look not aligned
Update 3: Fiddle
Although in Update 2 code it may look like that Sites-List, User-Operations & Download Details have different heights, they actually do not. They look so since we have applied background-color classes only to div element that contains the list.
For the issue regarding padding in between columns that can be solved by applying a mx-0 class attribute on the two rows, to make margin as 0
Rows have a negative margin of -15 px by default.
Checkout: Bootstrap negative margin on rows
Without mx-0 would cause a horizontal scrollbar on page. Checkout: Bootstrap columns cause horizontal scrollbar
Summary:
Treat row & col as Table's tr and td
Always put content in col
A col should necessarily have row as parent. Checkout: Bootstrap Grid Working & Guidlines
.col p{
margin: 0;
}
.user-login{
height: 100%
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Downloader</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="bg-primary">
<p>Sites-Banner</p>
</div>
<div class="bg-secondary">
<p>Sites-Search</p>
</div>
</div>
<div class="col">
<div class="bg-danger user-login">
<p>User-Login</p>
</div>
</div>
<div class="col">
<div class="bg-info">
<p>Download-Banner</p>
</div>
<div class="bg-light">
<p>Download-Summary</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="bg-success">
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
</div>
</div>
<!-- <div class="clearfix"></div> -->
<div class="col">
<div class="bg-warning">
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
</div>
</div>
<!-- <div class="clearfix"></div> -->
<div class="col">
<div class="bg-dark">
<p>Download-Details</p>
<p>Download-Details</p>
<p>Download-Details</p>
<p>Download-Details</p>
</div>
</div>
</div>
</div>
</body>
</html>
On my website, when I enter with my phone, the responsive css doesn't work.
Im thinking that it's something with the css code or with the padding.
If I enter with my computer I can see the post correctly, but when I enter with my iPhone 7, the responsive css doesn't work.
This links are picture with the problems:
image1 image2
This is the code that I have done:
'
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4594" class="portfolio-column portfolio-post portfolio-hover-style-1 all casa-nueva width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-850_3591.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">Casa Nueva</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Hollywood Hills Contemporary
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4640" class="portfolio-column portfolio-post portfolio-hover-style-1 all oakmoreroad width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="720" height="720" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/720x720-SERVICES-bedroom3-9545OakmoreRoad.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">oakmoreroad</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Oakmore Bvld.
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4688" class="portfolio-column portfolio-post portfolio-hover-style-1 all philo width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-livingroom2-080A3756.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/philo/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">philo</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Philo Hills Blvd.
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4718" class="portfolio-column portfolio-post portfolio-hover-style-1 all wilshire width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-10450-Wilshire-Blvd-UNIT-2A-print-024-024-Bedroom-2-4200x2800-300dpi.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/wilshire/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">wilshire</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Wilshire Blvd.'
You have got a inline content wider than screen of your phone, probably
img width="920" height="920" .....
If you want to fix this problem making the pictures (or any element) responsive to each device, you have to express them in term of a percentage of the size of each device or using vw and vh units
I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.
When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link
Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
I have an issue with bootstrap's grid layout. My columns are overlapping one another when I resize the screen to a smaller layout.
I'm not sure what the issue is.
Here is a picture of what is going on:
Here is my code
<div class='container-fluid'>
<div class="row"> <!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'> <!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row"> <!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<img src="vulcan.jpg" alt="vehicle image" width='391'/>
</div>
<div class='row'>
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->
<div class='row'>
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
<div class='row'>
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
<div class='row'>
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS,
WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN
ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU
SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT
ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div> <!-- end 3 -->
<hr>
</div> <!-- end wrap -->
According to Bootstrap Docs, for each .row you need to have a .col-*-* as direct child but you don't have it in a few of them. Which cause the overflow.
Plus don't use the html tag width, it is deprecated. use class="img-responsive" from bootstrap to achieve max-width:100%
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class="row">
<!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'>
<!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row">
<!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<div class="col-xs-12">
<img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
<!-- RIGHT SIDE -->
<div class='row'>
<div class="col-xs-12">
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div>
I believe your problem is that you have many elements with the "row" class that don't have any columns in them. The hierarchy goes container > row > col. Without a column, there is no need for anything to be declared a row, and it affects the layout in unusual ways without them.
Another problem is your image. Remove the "width" attribute, and add the following class attribute: class="img-responsive". See the Images section of the bootstrap docs for details.
In my case, I was using box-sizing: content-box; for all my elements in css. That is why padding was creating problems with overall computed width of the elements. So, I changed it to box-sizing: border-box; from box-sizing: content-box;
Ref:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing
I am making a site for my high school robotics team and I am completely new to html and css. How come one of the columns (the member 10 one) is not functioning like the others?
It seems one of the columns is off center. I'm not sure exactly how to describe it but I can post an image if necessary.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bubble">
<h2>Member 1 </h2>
<p>Team Captain, Engineer, Coder</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 2</h2>
<p>Head Engineer, Assistant Captain</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 3</h2>
<p>Head Coder, Head Web-master</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 4</h2>
<p>Coder, Head Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 5</h2>
<p>Engineer, Head 3D Modelling</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 6</h2>
<p>Coder, Web-master, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 7</h2>
<p>Financial Advisor, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 8</h2>
<p>Engineer, Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 9</h2>
<p>Engineer, Coder</p>
Read More
</div>
<div class="col-md-4">
<div class="bubble" id="special">
<h2>Member 10</h2>
<p>Secretary, Mascot</p>
Read More
</div>
</div>
</div>
</div>
</body>
</html>
#top-jumbotron
{
padding-left:0;
padding-right:0;
padding-bottom:0;
margin-bottom: 0;
}
body
{
background-color: #E8E8E8;
}
.bubble
{
background-color: #ffffff;
padding: 20px;
width: 95%;
height: 175px;
border-radius: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
#special
{
float: left;
}
You're just missing a /div - I notice you have a div inside a div, remember you need to close both. I use Netbeans for html and it will tell you if there is a problem. If you are on a Mac, I am told Komodo is really good, too. A good editing program is a life saver!
Fixed code:
<div class="col-md-4">
<div class="bubble">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
Read More
</div>
</div> <!-- this one! -->
edit there are a few things wrong with the code and michael points one out - as he says, Bootstrap is a grid. So Imagine (I actually draw it usually) a box split into 12 columns. For every row div, you should only have columns that add up to 12 inside it. You can break this and it will often still work because the div will just overflow and move down, but it's not best practice. If fixing the missing div end tag doesn't work, try fixing the row structure so it only adds up to 12 columns across the page
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
...
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.