I am making a page that uses Twitter Bootstrap. I just want a line to be written in a container that is responsive.
What I have tried is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
But this is not working correctly because some of my text is going out of bounds of the red background.
Any help?
Thanks
Leaving some padding from the left might work.
Try this
<div class="container-fluid">
<div class="row-fluid" >
<div class="span10" style="background-color:red;padding-left:10px;border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
Just put padding on the span10 class
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue; padding: 8px 30px;">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
Related
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
I'm new with CSS. I want to do something simple like have a treeview on span the entire left of a page col-4 for example and several grids on the major portion of the page stacked vertical col-8 for example.
What I have below is pushing the tree the entire width of the page and only one grid is displaying and that is below the tree instead of to the right of it.
I'm not sure if maybe the dynatree or jqgrid CSS is messing this up or my bootstrap is wrong?
<body>
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div id="info"> </div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
</body>
in your case col-sm-8 will always fell down because of <div id="info"> </div> that is a block element without any float so it run like a bootstrap row.
Try to do this:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
<div id="info"> </div>
</div>
</div>
</body>
or better (according o bootstrap):
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
<div class="row">
<div id="info"> </div>
</div>
</div>
</body>
As a test, I would remove
<div id="info"> </div>
Divs are block elements, which could be forcing the floated div to a new line.
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.
I'm trying to make my footer run the whole width of the web page like the navigation, however I want to centre the content of the footer inline with the content above.
<footer>
<div class="container narrow">
<div class="row-fluid footer">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
I thought that adding the classes <div class="container narrow"> inside the footer would centre the content but this has not worked. Any ideas?
The site is available here - http://www.openreachmarketing.co.uk/
You have the footer background defined in the .footer class. So you need .footer to wrap around .container.narrow.
This works when I try:
<footer>
<div class="footer">
<div class="container narrow row-fluid">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>