<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
In this example I use is-mobile class do make force classes inside to display in a row. The problem is this is forcing the <p class="heading"> and <p class="title"> to be displayed in a row to. Not even using <br> tag I am having success to display these two <p> in column. Is there anything I can do?
Are you trying to do something like the Mobile Level example on the Bulma docs? https://bulma.io/documentation/layout/level/#mobile-level
.level-item is set to display:flex, which makes the level items show in rows. In the example provided in the Bulma docs, there's an extra div wrapping the .heading and .title elements. Add that extra div and the text will show on two lines.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<div>
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
</div>
</div>
Related
I started to use BEM methodology and i have a question according to this.
Example:
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container-title">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container-title">block3</h1>
</div>
</div>
How you can see i use: container__title element in block 2 and in block3. I need this to add different margin and padding for h1.
Question: Can i use the same element in container__block-2 and container__block-3 according to BEM methodology?
It is okay to use the same element for another block as long as you want to have the same properties of the above blocks.
However, incase you need a variation, that's when the modifier comes into role.
whenever you need to make a change in only a particular element from a group of elements, you use a modifier there. It is denoted as block__element--modifier.
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--modifier1 ">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--modifier2">block3</h1>
</div>
</div>
For different variants of same class, u can use --
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--1">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--2">block3</h1>
</div>
</div>
This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 4 years ago.
I am working on a fiddle in which I want to vertically align James text in html/css as shown below in the image. The HTML code which I have used for that is:
<div class="tab-pane" id="reviews" style="display: block;">
<p>
<span class="heading_size">reviews:</span>
</p>
<p class="text-justify mb-0 mb-1">
</p>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
<span>10.22,07, 04, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
<span>10.14,01, 17, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<p></p>
</div>
In the fiddle, the text James is not properly aligned. I am wondering what changes I need to do in the HTML/CSS code so that the text James is aligned vertically properly.
I have a feeling width of this bobcat was amazing and it was perfect text is making James text not properly aligned vertically.
Problem Statement:
I am wondering what changes I need to do HTML/CSS code so that James text is properly vertically aligned.
At this moment, as shown in the image below, the upper James text is quite right in comparison to the lower James text.
You can use this solution, or another now we have a GRID also.
This solution, is to wrapping the content of your container with review class, and use flexbox for what you want.
.wrapper-review {
display: flex;
flex-flow: row wrap;
}
<div class="tab-pane" id="reviews" style="display: block;">
<p>
<span class="heading_size">reviews:</span>
</p>
<p class="text-justify mb-0 mb-1">
</p>
<div class="wrapper-review">
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
<span>10.22,07, 04, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
<span>10.14,01, 17, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
</div>
<p></p>
</div>
Trying adding the following to your css
p {
width: min-content;
}
But you should try using a grid system like http://getbootstrap.com. It helps a ton! :)
Working on a HTML page that requires me to have two elements side by side to replicate a 50/50 scenario sort of thing. I am using w3.css to help me since I am not so familiar with HTML/CSS.
My code is below for the section. So when the AWords/BWords grows too big, the cell grows so it does not match the other half. What I'm trying to ask is how can I implement a uniformly increase in size? So that both halves match each other, and the halfway mark stays in the middle of the screen?
<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
<div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
<div class="w3-container">
<p class="AWords w3-xxlarge"></p>
</div>
<div class="w3-container">
<p class="AVotes w3-large"></p>
</div>
</div>
<div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
<div class="w3-container">
<p class="BWords w3-xxlarge"></p>
</div>
<div class="w3-container">
<p class="BVotes w3-large"></p>
</div>
</div>
</div>
JSFiddle of what the code currently does
Assuming by the 'halfway' mark you mean the line that divides the two elements vertically, this arises due to the fact that W3 uses a table-based layout. Tables automatically expand to contain their contents.
As such, in order to ensure that both elements occupy the same amount of horizontal space, you simply give your cells a fixed width. This can be done by targeting .w3-cell:
.w3-cell {
width: 200px;
}
And can be seen in the following:
.w3-cell {
width: 200px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
<div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
<div class="w3-container">
<p class="AWords w3-xxlarge">Idk what to do</p>
</div>
<div class="w3-container">
<p class="AVotes w3-large"></p>
</div>
</div>
<div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
<div class="w3-container">
<p class="BWords w3-xxlarge">If this side gets too big it looks weird</p>
</div>
<div class="w3-container">
<p class="BVotes w3-large"></p>
</div>
</div>
</div>
I've also created a Fiddle showcasing this here.
Note that if you want to continue to use inline styles everywhere, you'll have to apply this to both <div> elements with this class.
Hope this helps :)
I am trying to create a percentage circle image with text underneath. I am not sure where to place the text so that it goes underneath. Right now it goes to the right side of the image. Thanks!
<div class="col-sm-3 wow fadeInDown text-center">
<div class="c100 p39 medium orange">
<span>39%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
<p class="lead"> example placeholder text </p>
You can simply put a p tag that automatically breaks like that :
<img id="myImage" src="...">
<p>My percentage</p>
I tried to run your code but the output is:
39%
example placeholder text
i didn't get what you said...
but if you want to put your text underneath your image
executing/coding the image first will do, if not
then use CSS instead. :D
<img src="">
<p>Example placeholder text</p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3 wow fadeInDown text-center">
<div class="c100 p39 medium orange">
<span>39%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<p class="lead"> example placeholder text </p>
</div>
The reason for why it does that is because you are using bootstrap and putting the text outside the col-sm-3 div which will tell the code to put the next part in the overflowing columns. If you put it inside it will end up under it. See snippet.
This worked:
CSS:
.col-sm-3 {
display: flex;
flex-wrap: wrap;
}
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/