I'm having a text message wrapped in bootstrap column div and i'm trying to customize specific text in that column by wrapping it with another div but bootstrap pushes that text to a new line.
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div>Text3</div></div>
</div>
</div>
https://jsfiddle.net/e642tsb1/
Its because div has a default property of display: block; which makes the div appear in a new line. Use the bootstrap class d-inline-block to set its display: inline-block;
It will then appear in the same line.
.row {
background: white;
margin-top: 20px;
}
.col {
border: solid 1px red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2
<div class="d-inline-block">Text3</div>
</div>
</div>
</div>
Change your interior div to a span and it will appear on the same line:
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2 <span>Text3</span></div>
</div>
</div>
A div is a block level element by default, meaning its content will take the entire width of the page, so any child div will do the same. Here is your updated fiddle:
https://jsfiddle.net/2huy04kc/
That's true it will happen.
<div> Text2 </div> will push your <div> Text3 </div> to the next line as div are block elements.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Better you use <span></span> or give a display: inline-block; property to the inner div containing Text3.
Learn different types of display in CSS here.
The div element is a block-level element. A block-level element always starts on a new line and takes up the full width available. You can use span element as an inline element. An inline element does not start on a new line and only takes up as much width as necessary.
Solution 1 : Replace div element with span element
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<span>Text3</span></div>
</div>
</div>
Solution 2 : Styling div element to display as an inline element (not recommended).
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div style="display:inline">Text3</div></div>
</div>
</div>
Related
I have this fiddle:
https://jsfiddle.net/qa5dr0x8/130/
I dynamically create divs, so i dont know how many will i have them and i dont know width of them. I manage to achive to have them in one line but there is a space after last div in container. What i want to to fill container with that divs even if i dont know width any of them. I would love to achive that without using flex. Any suggestion ?
<body>
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
you could use display: table instead of flex for the wrapper and use display:table-cell for the variable divs.
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black; display: table">
<div style="background-color:red;display:table-cell;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:table-cell;">
b1dfsd
</div>
<div style="background-color:blue;display:table-cell;">
c1d
</div>
</div>
https://jsfiddle.net/qa5dr0x8/131/
<body>
<div style="width:30%">
test text
</div>
<div style="width:70%;border:1px solid black;display:inline;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
If you want all in same line without space and without using flex then you can add css display:inline; in this div
<div style="width:70%;border:1px solid black;display:inline;">
I am trying to create a scrollable div which should show 3 div's side by side.
Below is my html code, Issue with below code is it is not showing 3 div's side by side instead it is displaying one after other.
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div>
Test1
</div></div>
<div class="col-xs-4">Test2</div>
<div class="col-xs-4">
<div>
Test3
</div></div>
</div></div>
css code:
<style>
.mygrid-wrapper-div {
/*border: solid red 5px;*/
overflow: scroll;
height: 40%;
}
</style>
A div is a "block-level" element. Block-level elements are 100% of the width of their parent element and displayed on their own line by default.
There are several ways to override this layout:
Set float for the element, which reduces it's width to the width of the content and allows other elements to be on the same line with the floated element.
Set the width to an amount that leaves left over space for another element to fit on the same line and set the element to be display:inline or display:inline-block.
Take the element out of the normal document flow by setting its position property to absolute, relative or fixed.
Make the elements flexitems within a flex container.
.mygrid-wrapper-div {
overflow: scroll;
height: 40%;
}
.col-xs-4 {
border: 1px solid red;
float:left;
}
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div ng-controller="myController">
<div ng-repeat="c in chart">
<div google-chart chart="c">test</div>
</div></div></div>
<div class="col-xs-4">22222222 </div>
<div class="col-xs-4"> <div ng-controller="myController">
<div ng-repeat="c1 in chart">
<div google-chart chart="c1">test</div>
</div></div></div>
</div></div>
Add the css style:
float:left;
to your divs.
Your plnkr.co example was not loading bootstrap, which is why you were not seeing your divs aligned as expected. Made the following changes to make it work:
Removed:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Added:
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
Check https://plnkr.co/edit/r6a7lJpNNG2UI1qDbcb6?p=preview
When i use row inside container i get indent between it's two block's but i can't do it.
I am going to clear indent between div .container and div .row. How I can do it. Htpl me,please
Now i get some like this:
my layout is given below:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="firstSection">
</div>
</div>
</div>
#RenderBody()
</div>
I have place two div inside an inline-flex div one of the two divs width reduces. I'm using bootstrap:
<section>
<div class="container">
<div class="flexx">
<div class="foo">
....
</div>
<div class="col-md-10">
<div class="card">
<div class="card-block">
...
</div>
</div>
</div>
</div>
</div>
</section>
Basically, foo class should be inline with col-md-10 which it does but col-md-10 gets small instead it should still be at 100%. Am I doing it correct? I'm not strong with css/scss.
I'm not sure I entirely understand your issue. inline-flex items do not default to full width. You will need to add some css for that to happen since in the css for bootstrap the flex-grow property is set to 0;
I think adding one style and a class will fix your issue, again if I understand you right.
// to your html
<div class="col foo">
....
</div>
// to your css
[class^="col"] {
flex-grow: 1;
}
Check out this pen for help
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>