Arranging the components in line (Bootstrap 4)

Is there a way to show it all in one line? I attempted using display inline for id="search", but it didn't have any effect.

Appreciate the help!

https://i.sstatic.net/TVmEf.png

https://i.sstatic.net/XbbrU.png

<div class="row">
      <div id="search">
        <div class="form-group">
        <input type="text" class="form-control" id="" placeholder="Search by skills/titles">
        </div>
        <div class="dropdown">
        <button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Location
        </button>
        <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Chennai</a>
        <a class="dropdown-item" href="#">Bangalore</a>
        <a class="dropdown-item" href="#">Mumbai</a>
        <a class="dropdown-item" href="#">Delhi</a>
        <a class="dropdown-item" href="#">Cochin</a>
        <a class="dropdown-item" href="#">Hyderabad</a>
        </div>
        </div>
        <button type="button" class="btn btn-outline-danger">Find Jobs</button>
      </div>
    </div>

htmlcsstwitter-bootstrap

Answer №1

Check out the Bootstrap Grid system for a helpful resource https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>Option 1 </h1>
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="col-md-6 col-xs-6">
        <input type="text" class="form-control" id="test" placeholder="Search by skills/titles">
      </div>
      <div class="col-md-3 col-xs-3">
        <div class="dropdown">
          <button class="btn btn-grey dropdown-toggle" type="button" id="test1" data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false">
            Select Location
          </button>
          <div class="dropdown-menu" aria-labelledby="about-us">
            <a class="dropdown-item" href="#">Chennai</a>
            <a class="dropdown-item" href="#">Bangalore</a>
            <a class="dropdown-item" href="#">Mumbai</a>
            <a class="dropdown-item" href="#">Delhi</a>
            <a class="dropdown-item" href="#">Cochin</a>
            <a class="dropdown-item" href="#">Hyderabad</a>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-xs-3">
        <button type="submit" class="btn btn-outline-danger">Find Jobs</button>
      </div>
    </div>
  </div>

  <h1>Option 2 </h1>
  <div class="row">

    <form class="form-inline">
      <div class="form-group">

        <input type="text" class="form-control" id="" placeholder="Search by skills/titles">

      </div>
      <div class="form-group">

        <div class="dropdown">
          <button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
            Select Location
          </button>
          <div class="dropdown-menu" aria-labelledby="about-us">
            <a class="dropdown-item" href="#">Chennai</a>
            <a class="dropdown-item" href="#">Bangalore</a>
            <a class="dropdown-item" href="#">Mumbai</a>
            <a class="dropdown-item" href="#">Delhi</a>
            <a class="dropdown-item" href="#">Cochin</a>
            <a class="dropdown-item" href="#">Hyderabad</a>
          </div>
        </div>
      </div>
      <div class="form-group">
      <button type="submit" class="btn btn-default">Find Jobs</button>
      </div>
    </form>

  </div>
  </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on implementing styled components in React.js with conditional statements

Embarking on my latest project with the goal of going "from Zero to Hero", I received a tip from a friend about styled components. Intrigued, I decided to ditch my traditional .css files and make the switch. Although I understand the basics - using <My ...

javascripthtmlcssreactjs

Angular HTML prints only halfway down the page when document is printed

While utilizing document.write(), I encountered an issue when printing the contents of an object specifically formatted for a printer. The text started printing only halfway down the page. I can successfully print the screen without any problems, which ma ...

javascripthtmlangular

Firm emblem obstructs individual avatar

I have noticed a strange issue with my header layout. When I include the hamburger menu and user icon, they align perfectly in a row. However, as soon as I add the company logo, the user icon shifts downward and breaks the alignment. I have tried adjustin ...

htmlcss

Tips for generating a new div for every iteration:

I am currently using asp.net with c# along with a Master Page. I have been attempting to create a new div for each loop in the while statement in order to customize the design as I desire. Is there a way to achieve this or is there an alternative method th ...

c#htmlcssasp.netloops

I am encountering an issue with the dropdown navigation menu in bootstrap

After creating a dropdown list using the code below, I encountered an issue where the sub-item "game" was not visible during implementation. Does this require any additional CDN? View the screenshot of the implementation. <head> <title>...& ...

javascriptjquerycssbootstrap-4drop-down-menu

If a div is hidden, disregard this particular CSS rule

In my current scenario, I am dealing with 3 distinct divs: - Menu - Header (#rt-top-surround) - Showcase (#rt-showcase) - Main Body content (#rt-mainbody-surround) The Menu is set as 'sticky' with position: fixed. As a result, I have to adjust ...

javascriptphphtmlcss

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

Setting the default value for ngModel does not receive any information from the model

I am trying to populate a form with default values using the code below: <h3>ِStart Time</h3> <div class="row" > <div class="col"> <label for="startTime">Hour(s) </label> <input type="numb ...

htmlcssangulartypescript

Steps for transforming this grid into a single-column list for mobile viewing

I have designed a unique menu grid with a center text and other menu options surrounding it. I am looking to make this grid display as a single line on mobile devices, with the center large text space disappearing on smaller screens. To achieve this, I cr ...

csscss-grid

React eliminates all white spaces

Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...

javascriptcssreactjs

Issue in insert.php file: stdClass::$variable property is undefined when using Ionic, Angular, and PHP together

There are three files. Once the submit button is clicked on the Ionic page, all inputs will be sent to the controller, which will then parse them to insert.php. The form input data is saved successfully when only using HTML (without Ionic content), however ...

phphtmlmysqlangularjsionic-framework

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

Displaying a dynamically populated variable using PHP within an isolated code block

One of the challenges I am facing involves a PHP loop responsible for loading images onto a slider: <div id="slider" class="flexslider"> <ul class="slides"> foreach($imglist as $image) { $caption = // Extracting metadata from each image ec ...

phpcss

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

What is the best way to align the Burger menu with the logo on the same row and have the menu dropdown open below the header?

Is there a way to align the Burger menu with the logo and have the menu dropdown open below the header? I attempted to position the burger menu next to the logo, but it didn't turn out the way I thought it would. Coding in html and css is still new t ...

htmlcssbootstrap-5

"Implementing a bookmark/watch feature with a hover text cloud using either a Drupal module or CSS styling

Seeking guidance on implementing features in Drupal core. Interested in allowing users to subscribe to various aspects of a node, such as bookmarking for later viewing or rating it. Want a consistent theme across the site and for these features to use togg ...

cssdrupalbutton

Using the combined power of CSS and jQuery to create dynamic visual effects based

Having some trouble figuring out why this code isn't functioning as expected... I've got a bunch of DIVs that have the class .rightColumnButton. Some of them currently have a height set to 30px: .rightColumnButton{ height:30px; width:206px; mar ...

jquerycssjquery-animate

Can the direction of a splide slider be altered in a responsive design?

Is there a way to change the direction of a Splide slider in a responsive design? I'm running into issues when attempting to adjust the thumbnail slider's direction in responsive mode. var secondarySlider = new Splide("#splidev2", { ...

htmlresponsivedirection

Creating a multi-level array or object from a deeply nested HTML list

I'm trying to create an Array that represents the structure of an ordered list. For example, the list would look like this: <ol class="list"> <li><p>1</p> <ol> <li><p>1.1</p>< ...

javascriptphpjqueryhtml

Blank page reached by PHP form submission

I am facing an issue with my form validation where, instead of displaying errors in the input fields, the page just refreshes to a blank screen. Any assistance on this matter would be greatly appreciated. NOTE: all code is within one file (registration.ph ...

phphtmlforms