I have a problem. Now I have bunch of divs in my code and i am using bootstrap, what I want is to make my content with control buttons be inline in small devices (like phone).However, i get something like this:
but that button should be in same line. Here is my code:
<div class='container-fluid info text-center'>
<h1>Truputėlis apie mane</h1>
<div class='row'>
<div class='col-xs-1 col-sm-1 col-md-4'>
<a href='#'><div class='controls left'><span class='glyphicon glyphicon-triangle-left' class='controls'></span>
</div></a>
</div>
<div class='col-xs-10 col-sm-10 col-md-4 about_me'>
<div style='background: url(notebook8.png);font-family: Dynalight; font-size:28px;padding-top:15px;padding-left:50px;padding-bottom:5px;margin:0 auto;border:1px solid grey;'>
<img src='http://www.arlongpark.net/customavatars/avatar23489_6.gif' style='width:80px; height:80px; background-color:white; border:1px solid black; border-radius:150px;'><br/>
<div class='about_me_text text-left'>
</div>
</div>
</div>
<div class='col-xs-1 col-sm-1 col-md-4'></div>
<a href='#' >
<div class='controls right'>
<span class='glyphicon glyphicon-triangle-right'></span>
</div>
</a>
</div>
</div>
</div>
What should I do? Sorry for my terrible english, hope you understood something...
Related
I want to use css, bootstrap to align the first line align left, and the second line will center on the text length of the first line.
I tried many ways but not.
code follow
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-md-2" style="padding:0">
<img src="/Content/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-10 tex-center" style="padding-right:0;">
<div style="padding:0">
<div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</div>
</a>
</div>
Please check this..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-xs-2" style="padding:0">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt="">
</div>
<div class="" style="float:left;">
<div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</a>
</div>
Try adding the class text-center to your divs.
Here is a working pen.
Something like this?
I don't know about your task, but I deleted some tags.
CSS
.img-responsive {
width: 100px;
float: left;
}
span {
display: block;
}
HTML
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt="">
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span>
<span class="text-center">THIS IS THE SECOND HEADLINE</span>
</div>
</a>
</div>
Reference Link
I have one row and two columns in it. Right column's content overlaps to left column. Here is my codes.
Even in the large screen I see that (in below code) <div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
this border overlaps to left.
Here is how it looks
How do I prevent overlapping their contents?
<div class="row">
<div class="col-lg-2" style="letter-spacing: 1px;">
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
<h5><b>ISBN:</b>1234567891</h5>
<h5><b>Kapak Türü:</b> Sert Kapak</h5>
<h5><b>Baskı No:</b>16</h5>
<h5><b>Yayınevi:</b>Publishing </h5>
<h5><b>Yıl:</b> 2005</h5>
</div>
<div class="col-lg-10">
<ul class="nav nav-tabs">
<li class="active">Yeni ve 2. El</li>
<li>Kirala</li>
<li>Kitap Detaylı Bilgileri</li>
<li>Kitap Yorumları</li>
</ul>#*nav nav-tabs*#
<div class="tab-content">
<div class="tab-pane active" id="satinAl">
<div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
<div class="col-md-3">
<h5><b>Fiyat + Kargo</b></h5>
</div>
<div class="col-md-3">
<h5><b>Kitabın Durumu</b></h5>
</div>
<div class="col-md-3">
<h5><b>Tahmini Teslim Tarihi</b></h5>
</div>
<div class="col-md-3">
<h5><b>Satıcı Bilgileri</b></h5>
</div>
</div> #*Başlık 1. row*#
<div class="row">
<div class="col-md-3">
<h5><b>39.87 TL</b></h5>
<h6>3.99 TL Kargo</h6>
</div>
<div class="col-md-3">
<h5><b>Çok İyi</b></h5>
<h6>Kitap çok iyi durumdadır. Çizgi karalam yoktur. Çok iyi müşteri hizmetleri. Alan Memnun</h6>
</div>
<div class="col-md-3">
<h5><b>Feb. 24 - Mar. 3.</b></h5>
<h6>Satıcı İade Politikası</h6>
</div>
<div class="col-md-3">
<h5><b>Jenny Blue</b></h5>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
100% Pozitif
</div>
</div> #*Ilk Satıcı 2. row*#
</div>#*tab-pane active Satın Al*#
<div class="tab-pane" id="kirala">
<p>Çok yakında hizmetinizde</p>
</div>
</div>#*tab-content*#
</div>#*col-md-10*#
</div>#*row*#
To make columns to behave responsively you need to remove fixed dimensions of image:
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
and set class="img-responsive" to it:
<img src="~/Content/images/kitap/kitap2.jpg" class="img-responsive"/>
here is a working example
It is because the image is bigger than the column.
You need either to use bootstrap img-responsive class and remove the width and height attributes in img
or
make the cols bigger , ex: use col-lg-4 for the first column and col-lg-8 for the second column.
I have a bootstrap's panel-based web page made using bootstrap's grid system. The problema is, I have those extra spaces in the left and right side of the divs. Basically the contents are on the center. How do I remove this?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc nothing worked.
Here's a picture:
Look at the left and right sides, thise the white spaces i'm trying to remove. I don't know if this is something wrong with my CSS or my bad use of framework (I'm new to it) or some bootstrap's standard behavior that I'm not aware of. But I'd like to what's this and know how to remove this.
Here's my HTML (this is the full HTML of above image except with the master page's HTML of course):
<div class="row">
<div class="col-md-6">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class = "panel-title">JUST HAPPEND, YOU KNOW</h3>
</div>
<div class="panel-body">
<p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<input class='btn btn-success' type='submit' value="LET ME READ ALL THAT" title="READ MORE...">
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">LAST NEWS</h3>
</div>
<div class = "panel-body">
<p />
MORE CONTENTS GOES HERE
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">VIDEOS</h3>
</div>
<div class = "panel-body">
<div class="vid">
<iframe width="420" height="315"
src="https://www.youtube.com/embed/yWP6Qki8mWc?cc_load_policy=1"
frameborder="0" allowfullscreen=""
></iframe>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">MAY I HELP YOU?</h3>
</div>
<div class = "panel-body">
HELLO
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class="panel-title">THE LIFE</h3>
</div>
<div class = "panel-body">
<div class="row">
<div id="links">
<div class="col-md-4">
<a href="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" title="Image 1" data-gallery>
<img src="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" alt="Image 1" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" title="Image 2" data-gallery>
<img src="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" alt="Image 2" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" title="Image 3" data-gallery>
<img src="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" alt="Image 3" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
AAAAAAA
</div>
<div class="col-md-4">
BBBBBBB
</div>
<div class="col-md-4">
CCCCCCC
</div>
</div>
</div>
</div>
I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
foo, bar, foobar
</div>
</div>
</div>
As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).
CodePen
I found the problem: in bootstrap there is a rule
.container {
width: 1170px;
}
This causes the white gaps. To remove it, simply add width:100% to body-content in site.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
width:100%; //ADD THIS
}
Here is the proof: codepen
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I'm using bootstrap for my first major product, I've merely played around with it in the past, now I have the following in my HTML view (this is indicative of the structure and is repeated, it's just an example to show how I have a div.row-fluid and 2 or 1 child divs)
<div id="menuWrapper" >
<div class="row-fluid">
<div class="col-xs-9 menu-detail">
Vorspeisen
</div>
<div class="col-xs-3 selected-orange text-right">
ab 2.80 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Hausgemachter Griebenschmalz auf Schrotbrot
<span class="grey-subtext">Portion mit Spreewald - Gurke</span>
</div>
<div class="col-xs-3 text-right">
3.80 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Hausgemachter Griebenschmalz auf Harzer Käze
<span class="grey-subtext">Portion mit Spreewald - Gurke</span>
</div>
<div class="col-xs-3 text-right">
3.80 €
</div>
</div>
<div class="row-fluid menu-header">
<div class="col-xs-9 menu-detail">
Hauptspeisen
</div>
<div class="col-xs-3 selected-orange text-right">
ab 12.80 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Ragu alla Bolognese
<span class="grey-subtext">mit orginal Parmesan Käse</span>
</div>
<div class="col-xs-3 text-right">
7.80 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Fish & Chips
<span class="grey-subtext">mit orginal Mushy-Erbse </span>
</div>
<div class="col-xs-3 text-right">
10.80 €
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<div class="col-xs-9">
Beriner Teller
<span class="grey-subtext">Bulette mit Kartoffelsalat, hausgemachter Art mit Jogurt-Dressing und original Spreewalk-Gurke</span>
</div>
<div class="col-xs-3 text-right">
9.80 €
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<div class="col-xs-9 menu-detail">
Dessert
</div>
<div class="col-xs-3 selected-orange text-right">
ab 2.90 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Alt Deutscher Käsekuchen
</div>
<div class="col-xs-3 text-right">
ab 2.90 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-9">
Alt Britisch Käsekuchen
</div>
<div class="col-xs-3 text-right">
ab 2.90 €
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12 text-center menu-close">
<span class="icon-close"></span>
Close
</div>
</div>
</div>
Now for some reason should I try to add a border-bottom and padding to the class="row-fluid" divs these are not shown, for example I have something like this in my CSS:
#menuWrapper .row-fluid {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid black;
}
even if I have no Div with an ID to isolate the styles the styles are not applied. It's as if the contents of the .row-fluid is overflowing out of the DIVs. If I want to add the border or padding on the row I have to apply it to the children divs with the styles class="col-xs-* Obviously I don't want to do this due to the repetition or classes. Does anyone know what I am doing wrong as I have no conflicting css (that I can isolate) that is producing this issue? Perhaps it is a lack of understanding on my part? But even if I remove all my CSS and apply the above css exclusively my view still doesn't produce the border and padding I want?
Try adding overflow:hidden to row-fluid
Fiddle
Css
#menuWrapper .row-fluid {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid black;
overflow:hidden;
}
for convenience, you can create your own style file, it has to override properties of an existing class, or create a class with the necessary parameters
<div class="row-flud your klass">
<div class="col-xs-9">
Hausgemachter Griebenschmalz auf Schrotbrot
<span class="grey-subtext"> Portion mit Spreewald - Gurke </ span>
</ div>
<div class="col-xs-3 text-right">
3.80 €
</ div>
</ div>